/* ══════════════════════════════════════════════════════════════════════
   Tema compartido por TODAS las apps de trámites (comercios, proveedores,
   y las que se sumen: empleados, automotores, partidas/obras...).
   Extraído de habilitacion_comercios.html el 2026-08-26 -- antes cada app
   tenía este CSS duplicado inline, así que cada ajuste de look & feel
   había que repetirlo a mano en cada HTML. Ahora se toca UNA vez acá y
   todas las apps que la referencian (<link rel="stylesheet"
   href="../shared/theme.css">) lo reciben solas.

   Qué SÍ vive acá: tokens base (fondo/texto/bordes/estados), formas
   (radios/sombras) y todos los componentes genéricos (topbar, cards,
   chips, botones, formularios, tabs, nav inferior, success, etc.).

   Qué NO vive acá (se define en el <style> propio de cada HTML, arriba
   del <link> a este archivo):
   - --accent / --blue-bg / --blue-txt / --topbar-grad / --page-grad: el
     color de IDENTIDAD de ESTE dominio (comercios=teal, proveedores=
     violeta, ...) -- a propósito distinto por dominio, para que no se
     confunda en qué tipo de trámite estás. app-shell.js::cargarConfiguracion()
     los puede pisar en tiempo de ejecución si el municipio definió
     TEMA_<DOMINIO>_* en su .env (ver backend/src/Comun/Config/TemaController.php)
     -- ESTE archivo solo trae un fallback neutro por si alguna app se
     olvida de definir los suyos.
   - Cualquier CSS realmente propio de una sola app (ej. el mapa de
     comercios, frontend/comercios/habilitacion_comercios.html).
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #ffffff; --bg2: #ede8f5; --bg3: #e0d9f0;
  --txt:      #1c1c1a; --txt2: #6b6b66; --txt3: #9c9a92;
  --border:   rgba(0,0,0,0.12); --border2: rgba(0,0,0,0.22);
  --green-bg: #dcfce7; --green-txt:#166534;
  --warn-bg:  #fef9c3; --warn-txt: #713f12;
  --red-bg:   #fde8e8; --red-txt:  #b91c1c;
  /* Superficies grandes (cards) con radio grande, controles chicos
     (botones/chips/inputs) con radio chico -- evita que un botón de 30px
     de alto se vea "todo esquinas redondeadas". */
  --radius:   8px;     --radius-lg:18px;
  --shadow:      0 4px 14px rgba(0,0,0,.10);
  --shadow-hover:0 16px 40px rgba(0,0,0,.16);

  /* Colores por categoría de trámite -- para diferenciar tipos DENTRO de
     una misma app (ej. "Nueva habilitación" vs "Cese"), a diferencia de
     --accent/--blue-* que identifican la app entera. Fijos a propósito,
     no dependen del dominio ni del municipio. */
  --cat-indigo-bg:#e0e7ff; --cat-indigo-txt:#4338ca;
  --cat-violet-bg:#f3e8ff; --cat-violet-txt:#7c3aed;
  --cat-amber-bg: #fef3c7; --cat-amber-txt: #b45309;
  --cat-red-bg:   #fee2e2; --cat-red-txt:   #dc2626;
  --cat-teal-bg:  #ccfbf1; --cat-teal-txt:  #0d9488;

  /* Fallback neutro por si algún HTML no define su propio color de marca
     (ver nota arriba) -- normalmente cada app lo pisa antes de este
     <link>. Los degradés referencian --blue-bg en vez de un hex propio
     para que sigan al color de marca de cada app sin que haga falta
     redefinirlos también. */
  --accent: #1a56db; --blue-bg: #dbeafe; --blue-txt: #1e40af;
  --topbar-grad: linear-gradient(120deg, var(--bg) 0%, var(--blue-bg) 100%);
  --page-grad:   linear-gradient(160deg, var(--bg2) 0%, var(--blue-bg) 100%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#1c1a24; --bg2:#252130; --bg3:#2e2a3a;
    --txt:#e8e6de; --txt2:#9c9a92; --txt3:#6b6b66;
    --border:rgba(255,255,255,0.1); --border2:rgba(255,255,255,0.2);
    --green-bg:#14532d; --green-txt:#86efac;
    --warn-bg:#451a03; --warn-txt:#fde68a;
    --red-bg:#450a0a;  --red-txt:#fca5a5;
    --shadow:      0 4px 14px rgba(0,0,0,.32);
    --shadow-hover:0 16px 40px rgba(0,0,0,.5);

    --cat-indigo-bg:#312e6e; --cat-indigo-txt:#a5b4fc;
    --cat-violet-bg:#3b1f6e; --cat-violet-txt:#d8b4fe;
    --cat-amber-bg: #452c06; --cat-amber-txt: #fcd34d;
    --cat-red-bg:   #450a0a; --cat-red-txt:   #fca5a5;
    --cat-teal-bg:  #042f2c; --cat-teal-txt:  #5eead4;
  }
}
body { font-family: system-ui,-apple-system,sans-serif; font-size:14px; color:var(--txt); background:var(--page-grad); min-height:100vh; }

/* ── Layout ── */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 20px; background:var(--topbar-grad); border-bottom:0.5px solid var(--border); position:sticky; top:0; z-index:10; }
.brand  { display:flex; align-items:center; gap:10px; }
.brand-icon { width:32px;height:32px;border-radius:var(--radius);background:var(--blue-bg);color:var(--blue-txt);display:flex;align-items:center;justify-content:center;font-size:17px; }
.brand-name { font-size:14px; font-weight:500; }
.brand-sub  { font-size:11px; color:var(--txt2); }
.avatar { width:28px;height:28px;border-radius:50%;background:var(--blue-bg);color:var(--blue-txt);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0; }
.user-info { display:flex;align-items:center;gap:10px; }
.user-info .name { font-size:13px;font-weight:500; }
.user-info .rut  { font-size:11px;color:var(--txt2); }
/* padding-bottom de más: deja lugar a la barra inferior fija (frame
   global, ver .bottom-nav) -- una app sin nav inferior no la necesita,
   pero sobra sin causar problema. */
.page { padding:20px 20px 88px; max-width:1100px; margin:0 auto; }

/* ── Navegación inferior (frame global, fuera de cualquier .screen) ── */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:20;
  display:flex; justify-content:center; gap:4px;
  background:var(--bg); border-top:0.5px solid var(--border);
  padding:8px 16px calc(8px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(0,0,0,.1);
}
.bottom-nav-item {
  flex:1; max-width:120px; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:none; border:none; cursor:pointer; padding:6px 4px; border-radius:var(--radius);
  color:var(--txt3); font-size:10.5px; font-family:inherit;
}
.bottom-nav-item i { font-size:21px; }
.bottom-nav-item.active { color:var(--accent); }
.bottom-nav-item:hover { background:var(--bg2); }

/* ── Cards ── */
.card    { background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;box-shadow:var(--shadow); }
.card-sm { background:var(--bg2);border-radius:var(--radius);padding:13px 15px;border-left:3px solid transparent; }
.card-sm.accent-green { border-left-color:#16a34a; }
.card-sm.accent-blue  { border-left-color:var(--accent); }
.card-sm.accent-gray  { border-left-color:var(--txt3); }

/* ── Tipografía ── */
.section-title { font-size:14px;font-weight:500;margin-bottom:12px; }
.muted  { color:var(--txt2); }
.small  { font-size:12px; }
.xsmall { font-size:11px; }
.label-caps { font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:var(--txt2);display:block;margin-bottom:5px; }

/* ── Chips ── */
.chip { display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:20px;font-size:12px;font-weight:500; }
.chip-xs { padding:2px 9px;font-size:10.5px; }
.chip-green  { background:var(--green-bg);color:var(--green-txt); }
.chip-warn   { background:var(--warn-bg); color:var(--warn-txt); }
.chip-red    { background:var(--red-bg);  color:var(--red-txt); }
.chip-blue   { background:var(--blue-bg); color:var(--blue-txt); }

/* ── Métricas ── */
/* auto-fit en vez de un número fijo de columnas: cada app tiene una
   cantidad distinta de tarjetas de métricas (comercios 2, proveedores 3,
   la próxima puede tener otra) y así se acomodan solas sin que haga falta
   una regla por app. */
.metrics { display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:20px; }
.metric-val  { font-size:22px;font-weight:500;margin-top:4px; }
.metric-unit { font-size:11px;color:var(--txt2); }

/* ── Trámites grid ── */
/* auto-fill en vez de un número fijo de columnas (2026-08-26, mismo
   criterio que .metrics): las tarjetas pasaron a ser ícono+título nomás
   (sin la descripción larga, ver .tramite-desc más abajo), bastante más
   bajas -- así entran más por fila en desktop sin que cada app tenga que
   declarar su propio número de columnas. */
.tramites-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:24px; }
.tramite-card  { background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;cursor:pointer;box-shadow:var(--shadow);transition:border-color .15s,transform .15s,box-shadow .15s; }
/* Degradé sutil por categoría: blanco hacia el color de su propio ícono,
   para que la tarjeta deje de ser un bloque plano y a la vez refuerce el
   color por tipo de trámite. El 240% empuja la segunda punta bien afuera
   del rectángulo -- solo se ve una insinuación de color en la esquina. */
.tramite-card.cat-indigo { background:linear-gradient(135deg,var(--bg) 0%,var(--cat-indigo-bg) 240%); }
.tramite-card.cat-violet { background:linear-gradient(135deg,var(--bg) 0%,var(--cat-violet-bg) 240%); }
.tramite-card.cat-amber  { background:linear-gradient(135deg,var(--bg) 0%,var(--cat-amber-bg)  240%); }
.tramite-card.cat-red    { background:linear-gradient(135deg,var(--bg) 0%,var(--cat-red-bg)    240%); }
.tramite-card:hover { border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow-hover); }
.tramite-disabled-note { display:none;align-items:center;gap:4px;margin-top:8px;font-size:11px;color:var(--txt3); }
.tramite-card.disabled { opacity:.5;cursor:not-allowed;pointer-events:none; }
.tramite-card.disabled:hover { transform:none;box-shadow:var(--shadow); }
.tramite-card.disabled .tramite-disabled-note { display:flex; }
.tramite-icon  { width:36px;height:36px;border-radius:10px;background:var(--blue-bg);color:var(--blue-txt);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px; }
.tramite-icon.cat-indigo { background:var(--cat-indigo-bg);color:var(--cat-indigo-txt); }
.tramite-icon.cat-violet { background:var(--cat-violet-bg);color:var(--cat-violet-txt); }
.tramite-icon.cat-amber  { background:var(--cat-amber-bg); color:var(--cat-amber-txt); }
.tramite-icon.cat-red    { background:var(--cat-red-bg);   color:var(--cat-red-txt); }
.tramite-icon.cat-teal   { background:var(--cat-teal-bg);  color:var(--cat-teal-txt); }
.tramite-title { font-size:14px;font-weight:500;margin-bottom:3px; }
.tramite-desc  { font-size:12px;color:var(--txt2);line-height:1.5; }

/* ── Actividad ── */
.activity-list { list-style:none; }
.activity-item { display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:0.5px solid var(--border);font-size:13px; }
.activity-item:last-child { border-bottom:none; }
.dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.dot-green { background:#16a34a; } .dot-blue { background:var(--accent); } .dot-warn { background:#ca8a04; }

/* ── Breadcrumbs (contexto de navegación) ── */
.crumbs { display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:13px;color:var(--txt2); }
.crumb-back { background:var(--bg);border:0.5px solid var(--border2);border-radius:var(--radius);width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt);flex-shrink:0;transition:background .15s; }
.crumb-back:hover { background:var(--bg2); }
.crumb-link { cursor:pointer; }
.crumb-link:hover { color:var(--accent);text-decoration:underline; }
.crumb-sep  { font-size:12px;color:var(--txt3); }
.crumb-current { color:var(--txt);font-weight:500;display:flex;align-items:center;gap:6px; }

/* ── Formularios ── */
.form-card { background:var(--bg);border:0.5px solid var(--border);border-top:3px solid var(--accent);border-radius:var(--radius-lg);padding:24px;max-width:720px;margin:0 auto;box-shadow:var(--shadow); }
.form-card.danger { border-top-color:var(--red-txt); }
.form-header h2 { font-size:16px;font-weight:500; }
.form-header p  { font-size:13px;color:var(--txt2);margin-top:4px; }
.form-header    { margin-bottom:20px; }
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.form-group { margin-bottom:14px; }
.filtros-tramites { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.filtros-tramites .form-group { margin-bottom:0; flex:1 1 150px; min-width:130px; }
.filtros-tramites .btn { flex-shrink:0; }
/* input[type=date] sumado acá (2026-09-21, encontrado en Inspectores):
   faltaba en este selector, igual que le pasó a type=search antes -- sin
   esto, un filtro de fecha queda con el estilo nativo del navegador (más
   angosto/sin fondo), distinto al resto de los campos de un mismo
   .filtros-tramites. Beneficia a cualquier app que sume un filtro de
   fecha (Reportes ya lo pisaba a mano en su propio <style> por este
   mismo motivo). */
input[type=text],input[type=email],input[type=password],input[type=search],input[type=date],select,textarea {
  width:100%;padding:8px 12px;font-size:14px;
  border:0.5px solid var(--border2);border-radius:var(--radius);
  background:var(--bg2);color:var(--txt);outline:none;
  transition:border-color .15s;
}
input:focus,select:focus,textarea:focus { border-color:var(--accent); }
input[readonly] { background:var(--bg3);color:var(--txt2);cursor:not-allowed; }
textarea { resize:vertical;min-height:72px; }
.divider { border:none;border-top:0.5px solid var(--border);margin:16px 0; }

/* ── Upload zone ── */
.upload-zone { border:0.5px dashed var(--border2);border-radius:var(--radius);padding:18px;text-align:center;color:var(--txt2);font-size:13px;cursor:pointer;background:var(--bg2);transition:border-color .15s,background .15s,color .15s; }
.upload-zone i { font-size:22px;display:block;margin-bottom:5px;color:var(--txt3);transition:color .15s; }
.upload-zone:hover { border-color:var(--accent);background:var(--bg3);color:var(--txt); }
.upload-zone:hover i { color:var(--accent); }
.upload-zone-ok { border-style:solid;border-color:#16a34a;color:#16a34a; }
.upload-zone-ok i { color:#16a34a; }
.upload-zone-nombre { display:block;font-weight:500;word-break:break-all; }

/* Link discreto a un trámite "catch-all" (ej. "Otro / consulta") -- a
   propósito NO tiene el mismo estilo que las tarjetas de la grilla (border
   sólida + ícono grande): es un fallback, no un trámite específico más,
   así la grilla principal se mantiene prolija. Solo se usa si la app tiene
   ese trámite genérico en su backend. */
.otros-link { display:flex;align-items:center;gap:10px;padding:12px 14px;border:0.5px dashed var(--border2);border-radius:var(--radius);color:var(--txt2);font-size:13px;cursor:pointer;margin-bottom:20px;transition:border-color .15s,background .15s,color .15s; }
.otros-link:hover { border-color:var(--accent);background:var(--bg2);color:var(--txt); }
.otros-link i:first-child { font-size:18px; }
.otros-link i.cat-teal-icon { color:var(--cat-teal-txt); }
.otros-link:hover i:first-child { color:var(--accent); }

/* Botón de ayuda en el encabezado (acceso a documentación in-app).
   Pedido 2026-09-02: "más grande/visible" -- antes era un círculo
   transparente de 30px con ícono gris (se perdía contra el resto del
   topbar). Ahora tiene relleno de color (mismo tratamiento que
   .brand-icon/.avatar, no un tercer estilo nuevo) y queda más grande que
   ambos para que sea el ícono más fácil de encontrar del encabezado. */
.btn-ayuda { background:var(--blue-bg);border:0;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--blue-txt);cursor:pointer;font-size:21px;flex-shrink:0;transition:filter .15s; }
.btn-ayuda:hover { filter:brightness(0.93); }

/* Pantalla de Ayuda: acordeones nativos <details>/<summary> */
.ayuda-item { border:0.5px solid var(--border2);border-radius:var(--radius);overflow:hidden; }
.ayuda-item summary { padding:12px 14px;cursor:pointer;font-weight:500;font-size:13.5px;display:flex;align-items:center;gap:8px;list-style:none;background:var(--bg2); }
.ayuda-item summary::-webkit-details-marker { display:none; }
.ayuda-item summary::after { content:'+';margin-left:auto;color:var(--txt3);font-size:16px; }
.ayuda-item[open] summary::after { content:'−'; }
.ayuda-item summary i { color:var(--accent);font-size:16px; }
.ayuda-cuerpo { padding:4px 14px 14px 40px;font-size:13px;color:var(--txt2);line-height:1.55; }
.ayuda-cuerpo p { margin:6px 0; }
.ayuda-cuerpo ul { margin:6px 0;padding-left:18px; }
.ayuda-cuerpo li { margin-bottom:4px; }

/* Variante ancha para pantallas donde .form-card (720px) deja un margen
   vacío enorme en desktop -- ayuda (contenido de lectura), pero también
   cualquier formulario/documento con varios campos por fila. A partir de
   900px, además, .ayuda-grupo pasa cada grupo de preguntas a 2 columnas. */
.form-card-ancho { max-width:1000px; }
.ayuda-grupo { display:flex; flex-direction:column; gap:8px; }
@media(min-width:900px) {
  .ayuda-grupo { display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; align-items:start; }
}

/* ── Botones ── */
.btn-row { display:flex;gap:10px;margin-top:20px;flex-wrap:wrap; }
.btn { padding:9px 20px;font-size:13px;border-radius:var(--radius);cursor:pointer;border:none;font-family:inherit;display:inline-flex;align-items:center;gap:6px;transition:opacity .15s,box-shadow .15s,transform .1s;text-decoration:none; }
.btn:active { transform:scale(.97); }
.btn-primary   { background:var(--accent);color:#fff;font-weight:500;box-shadow:0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-primary:hover { opacity:.92;box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 45%, transparent); }
.btn-secondary { background:transparent;border:0.5px solid var(--border2);color:var(--txt); }
.btn-secondary:hover { background:var(--bg2); }
.btn-secondary:disabled { opacity:0.4;cursor:default;pointer-events:none; }
.btn-danger    { background:var(--red-bg);color:var(--red-txt);font-weight:500; }
.btn-danger:hover { opacity:.85; }

/* ── Tabs ── */
.tabs { display:flex;gap:4px;margin-bottom:20px; }
.tab  { padding:6px 13px;font-size:13px;border-radius:var(--radius);border:none;cursor:pointer;background:transparent;color:var(--txt);font-family:inherit;transition:background .15s; }
.tab:hover:not(.active) { background:var(--bg2); }
.tab.active { background:var(--bg2);font-weight:500; }

/* ── Alerta ── */
.alert { padding:11px 14px;border-radius:var(--radius);font-size:13px;line-height:1.55;margin-bottom:16px; }
.alert-warn { background:var(--warn-bg);color:var(--warn-txt); }
.alert-red  { background:var(--red-bg); color:var(--red-txt); }
.alert-blue { background:var(--blue-bg);color:var(--blue-txt); }

/* ── Doc preview ── */
.doc-preview { border:0.5px solid var(--border2);border-radius:var(--radius);padding:16px;background:var(--bg2);margin:14px 0; }
.doc-field   { display:flex;justify-content:space-between;padding:5px 0;border-bottom:0.5px solid var(--border);font-size:12px; }
.doc-field:last-child { border-bottom:none; }

/* ── Success ── */
.success-card { background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:40px 28px;max-width:460px;text-align:center;margin:0 auto;box-shadow:var(--shadow); }
.success-icon { width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 16px; }
.success-icon.icon-green { background:var(--green-bg); }
.success-icon.icon-warn  { background:var(--warn-bg); }
.folio-box { display:inline-block;background:var(--bg2);border:0.5px solid var(--border2);border-radius:var(--radius);padding:7px 20px;font-size:13px;font-weight:500;color:var(--accent);margin-bottom:22px; }
/* Número de trámite de la pantalla de éxito, como link al detalle (ver
   folioConLinkAlDetalle en app-shell.js). Botón sin chrome que se lee
   como enlace. */
.folio-link { background:none;border:none;padding:0;font:inherit;font-weight:600;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:2px; }
.folio-link:hover { filter:brightness(.88); }

/* ── Screens ── */
.screen { display:none; }
.screen.active { display:block;animation:fadeIn .25s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:translateY(0);} }

@media(max-width:520px) {
  .tramites-grid,.form-row { grid-template-columns:1fr; }
  .metrics .card-sm { padding:11px 10px; }
  .metrics .metric-val { font-size:19px; }
  .page { padding:14px 14px 88px; }
  .topbar { padding:10px 10px; gap:6px; }
  .topbar .chip-xs { display:none; }
  /* Encabezado en una sola fila en celular (2026-09-21, encontrado en
     Inspectores con un nombre de app largo -- "Inspecciones de
     Comercio" -- y un nombre de usuario tipo "NESTOR"/"Inspector
     municipal"): marca + usuario ya no entraban juntos en el ancho de un
     celular y el segundo grupo (ícono de ayuda + avatar + nombre) se iba
     a una segunda fila. Se achica el padding/gap del topbar Y se saca el
     subtítulo de marca y el hint de "Tocá para cambiar"/rut (lo que
     menos hace falta para reconocer dónde estás/quién sos en ese ancho)
     -- entre los dos ajustes alcanza incluso para nombres largos, sin
     necesidad de truncar con ellipsis. */
  .brand-sub, .user-info .rut { display:none; }
}