/* src/styles/responsive.css
   --------------------------
   Adaptación del panel a celular (≈390 px) y tablet (≈768 px).
   Se importa en main.tsx DESPUÉS de tokens.css, así sus reglas pisan a las
   de tokens.css cuando la pantalla es angosta. En pantallas anchas casi
   nada de este archivo tiene efecto (solo el armazón .app-shell, que
   reproduce lo que antes eran estilos en línea de components/Layout.tsx).

   Puntos de corte:
     · 900 px  -> el menú lateral deja de ser fijo y pasa a ser un menú
                  desplegable (botón de hamburguesa en una barra superior).
     · 720 px  -> "celular": menos espacio alrededor, campos y botones de
                  tamaño táctil (mínimo 44 px), tablas con scroll lateral.
*/

/* ================= Armazón general (menú + barra superior + contenido) ================= */
/* Rediseño visual, Etapa 1: el armazón tiene tres partes:
     .app-sidebar  menú izquierdo (224 px, o 68 px "achicado" a solo íconos)
     .app-topbar   barra superior (dónde estás + modo noche + usuario)
     .app-main     contenido de la pantalla
   .app-col agrupa barra superior + contenido a la derecha del menú. */
:root { --topbar-h: 56px; }
.app-shell { display: flex; min-height: 100vh; }
.app-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Menú lateral fijo (pantallas anchas). */
.app-sidebar {
  width: 224px;
  flex-shrink: 0;
  background: var(--side);
  color: rgba(255, 255, 255, 0.82);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) 0 var(--space-3);
  /* El menú queda fijo a la altura de la ventana (con scroll propio si no entra),
     así el pie (cuenta, salir, achicar) siempre se ve aunque la pantalla sea larga. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  align-self: flex-start;
  transition: width .18s ease;
}
/* Foco de teclado visible sobre el fondo oscuro del menú (el anillo azul de marca no se vería). */
.app-sidebar :focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* Marca: cuadrado con la «R» + nombre. */
.side-logo { display: flex; align-items: center; gap: 10px; padding: 0 var(--space-4) var(--space-4); }
.side-logo-marca {
  width: 32px; height: 32px; flex: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 17px;
}
.side-logo-texto { font-weight: 700; font-size: 1.15rem; letter-spacing: 0.04em; color: #fff; }

.side-nav { display: flex; flex-direction: column; gap: 14px; padding: 0 var(--space-3); flex: 1; }
.side-lista { display: flex; flex-direction: column; gap: 2px; }
/* Título de cada grupo (Operación, Recursos, ...). */
.side-grupo {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.62); padding: 0 12px 4px;
}

/* Ítem del menú (vínculo o botón). */
.side-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border-radius: var(--radius-sm);
  border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
}
.side-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.side-item.is-active { background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 700; }
.side-item svg { flex: none; }
.side-item { position: relative; }
/* Contador de «Hoy»: píldora blanca con texto oscuro (se lee sobre el menú azul oscuro, día y noche). */
.side-badge { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: #fff; color: #0C2A3F; font-size: 11px; font-weight: 700; text-align: center; line-height: 1.5; }

.side-pie { padding: var(--space-3) var(--space-3) 0; margin-top: var(--space-3); border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-direction: column; gap: 2px; }
/* Botón «Achicar menú» (con borde, como en la maqueta): va debajo de la marca, antes de los grupos. */
.side-plegar-caja { padding: 0 var(--space-3) var(--space-3); }
.side-plegar {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.34); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, 0.9);
}
.side-plegar:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* Menú ACHICADO (68 px, solo íconos): solo en pantalla ancha; en celular el menú siempre se abre completo. */
@media (min-width: 901px) {
  .app-shell.is-mini .app-sidebar { width: 68px; }
  .app-shell.is-mini .side-texto,
  .app-shell.is-mini .side-logo-texto { display: none; }
  .app-shell.is-mini .side-logo { justify-content: center; padding-left: 0; padding-right: 0; }
  .app-shell.is-mini .side-grupo { height: 1px; padding: 0; margin: 2px 8px 6px; background: rgba(255, 255, 255, 0.14); font-size: 0; }
  /* Menú achicado: el número pasa a una insignia chica arriba a la derecha del ícono. */
  .app-shell.is-mini .side-badge { position: absolute; top: 2px; right: 8px; margin-left: 0; min-width: 16px; padding: 0 4px; font-size: 10px; line-height: 1.5; }
  .app-shell.is-mini .side-item,
  .app-shell.is-mini .side-plegar { justify-content: center; padding-left: 0; padding-right: 0; }
}

/* ---------- Barra superior ---------- */
.app-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  height: var(--topbar-h); padding: 0 var(--space-5);
  background: var(--surface); border-bottom: 1px solid var(--border);
  color: var(--text);
}
/* El botón de menú y la marca solo se ven en celular/tablet (ver más abajo). */
.app-topbar-btn, .app-topbar-marca { display: none; }
.topbar-migas { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.topbar-miga { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
.topbar-miga a { color: var(--dim); text-decoration: underline; }
.topbar-miga-actual { color: var(--text); font-weight: 600; }
.topbar-derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
/* Botón «Modo noche / Modo día» */
.topbar-tema {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600;
}
.topbar-tema:hover { background: var(--surface-alt); }
/* Píldora del usuario */
.topbar-usuario {
  display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 3px 14px 3px 4px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface-alt);
}
.topbar-iniciales {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--on-brand); font-size: 11px; font-weight: 700;
}
.topbar-usuario-datos { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.topbar-usuario-nombre { font-size: 12.5px; font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-usuario-rol { font-size: 11px; color: var(--dim); }

/* Contenido de cada pantalla. min-width:0 es clave: sin eso un hijo ancho
   (una tabla, un mapa) ensancha TODA la página en vez de scrollear solo. */
.app-main { flex: 1; min-width: 0; padding: var(--space-6); max-width: 1280px; width: 100%; }

/* El fondo oscuro detrás del menú abierto: solo existe en celular. */
.app-backdrop { display: none; }

/* Imágenes, mapas y campos nunca más anchos que su contenedor. */
img, svg, canvas, video { max-width: 100%; }
.leaflet-container { max-width: 100%; }

/* ================= Tablet y celular: menú desplegable ================= */
@media (max-width: 900px) {
  .app-topbar { padding: 0 var(--space-3); }
  .app-topbar-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-left: -8px;
    border: none; border-radius: var(--radius-sm);
    background: transparent; color: var(--text); cursor: pointer;
  }
  .app-topbar-btn:active { background: var(--surface-alt); }
  .app-topbar-marca { display: inline; font-weight: 700; font-size: 1.1rem; letter-spacing: 0.04em; }
  .side-plegar-caja { display: none; }

  /* El menú se saca del flujo y se desliza desde la izquierda. */
  .app-sidebar {
    position: fixed;
    top: var(--topbar-h); left: 0; bottom: 0;
    z-index: 50;
    width: min(290px, 85vw);
    height: auto;
    align-self: auto;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-float);
  }
  .app-sidebar.is-open { transform: translateX(0); }
  /* Los ítems del menú con área táctil cómoda. */
  .app-sidebar a, .app-sidebar button { min-height: 44px; }

  .app-backdrop {
    display: block;
    position: fixed; inset: var(--topbar-h) 0 0 0;
    z-index: 45;
    background: rgba(6, 22, 31, 0.55);
  }

  .app-main { padding: var(--space-5) var(--space-4); max-width: none; width: 100%; }
}

/* Celular angosto: la barra superior prioriza el modo noche y el usuario. */
@media (max-width: 720px) {
  .topbar-migas, .topbar-usuario-datos { display: none; }
  .topbar-usuario { padding: 3px; }
}

/* ================= Celular ================= */
@media (max-width: 720px) {
  .app-main { padding: var(--space-4) var(--space-3); }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.2rem; }
  .card-pad { padding: var(--space-4); }

  /* Tamaño táctil (mínimo 44 px de alto). El texto de los campos a 16 px
     evita que iPhone haga zoom solo al tocar un campo. */
  .btn { min-height: 44px; }
  .btn-sm, .btn-ghost, .btn-danger-ghost { min-height: 40px; }
  .input, select.input, textarea.input { font-size: 16px; min-height: 44px; }
  .btn-icon { width: 40px; height: 40px; }
  .checkbox-row { padding: 11px 0; }
  .checkbox-row input[type="checkbox"] { width: 22px; height: 22px; }
  .transfer-row { padding: 12px var(--space-3); }

  /* Tablas: el contenedor scrollea hacia los costados (la página NO) y la
     tabla conserva un ancho mínimo para que las columnas sean legibles. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table { min-width: 600px; }
  .table td, .table th { padding: 10px 10px; }

  /* Filtros de los listados (campos con ancho mínimo en línea): a todo el ancho. */
  .app-main .field[style*="min-width"] { flex: 1 1 100%; min-width: 0 !important; }
  .app-main select.input { max-width: 100%; }
  /* El nombre en la primera columna de las tablas no se parte letra por letra. */
  .table td:first-child { min-width: 140px; }

  /* Tarjetas con ancho mínimo en línea (detalle de servicio, nuevo servicio): que se achiquen. */
  .app-main [style*="min-width: 240px"], .app-main [style*="min-width: 260px"],
  .app-main [style*="min-width: 320px"], .app-main [style*="min-width: 200px"] { min-width: 0 !important; }

  /* Barras de botones del formulario: botones a todo el ancho, apilados. */
  .form-actions .btn { flex: 1 1 140px; justify-content: center; }

  /* Fichas "de un vistazo": dos datos por fila. */
  .resumen-franja { gap: var(--space-3) var(--space-4); }
  .resumen-dato { min-width: 42%; flex: 1 1 42%; }

  /* Mapas con altura razonable en pantalla chica. */
  .form-with-map .form-map-col .leaflet-container { height: 300px !important; }
  .transfer-list { height: 260px; }
}

/* Etapa 6: el asistente de Nuevo servicio oculta los pasos con el atributo hidden; esto evita que un display de clase lo anule. */
[hidden] { display: none !important; }