/* Adaptación para celulares. Todo está dentro de este media query: la vista de PC no cambia. */
@media (max-width:700px){
  html{-webkit-text-size-adjust:100%}
  body{overscroll-behavior-y:contain}
  /* Evita el zoom automático del iPhone al tocar un campo (requiere 16px) */
  input,select,textarea,.sel,.note-in{font-size:16px!important}

  /* Zonas seguras (muesca y barra inferior) cuando se usa como app instalada */
  .pt-top{padding-top:calc(12px + env(safe-area-inset-top))}
  .main{padding-top:env(safe-area-inset-top);padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .sidebar{height:100dvh;padding-top:calc(14px + env(safe-area-inset-top));overflow-y:auto;-webkit-overflow-scrolling:touch}
  .login{padding-top:calc(16px + env(safe-area-inset-top))}

  /* Cabecera del proyecto más compacta */
  .topbar{position:sticky;top:0;z-index:15;background:var(--bg);margin:0 -16px;padding:0 16px;height:56px}
  .head{gap:12px;margin:4px 0 12px}
  .head h1{font-size:18px;line-height:1.3}
  .client{margin:8px 0 0;gap:10px;flex-wrap:wrap}
  .dates{padding:12px 14px}
  .dates-row{gap:16px;margin-bottom:8px}
  .tabs{margin:0 -16px 14px;padding:0 12px;-webkit-overflow-scrolling:touch}
  .tabs button{padding:8px 12px 10px;font-size:13.5px}

  /* Tarjetas y encabezados de sección */
  .pad{padding:14px}
  .panel-head{flex-wrap:wrap;gap:10px}
  .panel-head .actions{flex-wrap:wrap}
  .rows .grow{white-space:normal}
  .toolbar{gap:8px}
  .seg{max-width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .seg button{white-space:nowrap}

  /* Tablas → tarjetas apiladas (cada fila es una tarjeta; cada dato con su título) */
  .table-wrap{overflow:visible}
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tr{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:#fff}
  .table tr:hover td{background:none}
  .table td{border:0;padding:5px 0;display:flex;gap:12px;align-items:center;justify-content:space-between;text-align:right;min-height:30px;white-space:normal!important}
  .table td::before{content:attr(data-label);font-size:11.5px;color:var(--muted);font-weight:600;text-align:left;flex-shrink:0;max-width:42%}
  .table td:first-child{display:block;text-align:left;font-size:14px;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:4px}
  .table td:first-child::before{display:none}
  .table td[data-label=""]{justify-content:flex-end}
  .table td[data-label=""]::before{display:none}
  .table td:empty{display:none}
  .table td .chips,.table td .docname{justify-content:flex-end}
  .table td:first-child .chips,.table td:first-child .docname{justify-content:flex-start}
  .table .sel{max-width:60%}
  .table td{min-width:0}
  /* Celdas con contenido compuesto (título + detalle, adjuntos…): dato arriba, contenido a todo el ancho */
  .table td:has(> div, > .chips, > b + div){display:block;text-align:left}
  .table td:has(> div, > .chips, > b + div)::before{display:block;max-width:none;margin-bottom:4px}
  .table td:has(> div, > .chips) .chips{justify-content:flex-start}
  .table td:first-child{overflow-wrap:anywhere}
  .chips{flex-wrap:wrap;max-width:100%;min-width:0}
  .chip{max-width:100%}
  .ibtn{width:38px;height:38px}

  /* Formularios y ventanas: panel desde abajo, a pantalla completa y desplazable */
  .modal-bg{padding:0;align-items:end}
  .modal{max-width:none!important;width:100%;border-radius:18px 18px 0 0;max-height:92dvh;padding:18px 16px calc(18px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}
  .modal-actions{position:sticky;bottom:0;background:#fff;padding:10px 0 2px}
  .modal-actions .btn{flex:1;justify-content:center;height:42px}
  .modal.preview{height:100dvh;max-height:100dvh;border-radius:0;padding-top:calc(12px + env(safe-area-inset-top))}
  .user-menu{position:fixed;left:12px;right:12px;width:auto;top:60px}

  /* Calendario y agenda */
  .cal{gap:2px}
  .cal-h{font-size:10.5px}
  .cal-cell{min-height:48px;padding:3px;border-radius:6px}
  .cal-d{font-size:11px}
  .cal-title{min-width:0;font-size:13px}

  /* Checklist */
  .check-row{padding:12px 2px}
  .res{padding:9px 2px;font-size:12.5px}
  .sec-title{position:sticky;top:56px;z-index:5}

  /* Informe */
  .report{padding:18px 14px;font-size:13px}
  .report h1{font-size:21px}
  .rep-kv th{width:auto;min-width:110px}
  .rep-sev,.rep-sev tbody,.rep-sev tr{display:block}
  .rep-sev{margin:12px 0}
  .rep-sev tr{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .rep-sign{flex-direction:column;gap:40px}

  /* Portal */
  .pt-hello h1{font-size:22px}
  .pt-user{gap:6px}
  .pt-user .btn{height:32px;padding:0 10px}
  .mod-card{padding:16px}

  /* Aviso de instalación (solo celular) */
  .install-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:70;display:flex;align-items:center;gap:12px;
    background:var(--navy);color:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 10px 30px rgba(2,6,23,.35);font-size:13px}
  .install-bar b{display:block;font-size:14px}
  .install-bar span{color:#c8d3e6}
  .install-bar .btn.primary{flex-shrink:0}
  .install-bar .x{color:#c8d3e6;font-size:20px;line-height:1;padding:4px}
}
/* El aviso de instalación nunca se muestra en pantallas grandes */
@media (min-width:701px){.install-bar{display:none!important}}