/* Clases propias de la app SSMAC (segundo <style> de la plantilla) + responsividad.
   Los colores salen de los tokens de broadsheet.css; los hex que quedan aqui son los que la propia plantilla fija en el tema ecodrill y en .brand-strip. */
html,body{background:var(--color-bg);}
  a{color:var(--color-accent);} a:hover{color:var(--color-accent-700);}
  .app-shell{max-width:1180px;margin:0 auto;padding:0 var(--space-6) var(--space-8);}
  .masthead-rule{height:3px;background:var(--color-text);}
  .masthead-thin{height:1px;background:var(--color-text);margin-top:2px;}
  .navlink{background:none;border:0;font-family:var(--font-heading);font-weight:600;font-size:15px;cursor:pointer;color:var(--color-text);padding:4px 0;position:relative;}
  .navlink:hover{color:var(--color-accent);}
  .navlink[data-active="1"]{color:var(--color-accent);}
  .navlink[data-active="1"]::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--color-accent);}
  .kpi-num{font-family:var(--font-heading);font-weight:600;font-size:52px;line-height:1;letter-spacing:-0.02em;}
  .track{height:8px;background:var(--color-neutral-200);border-radius:99px;overflow:hidden;}
  .track > span{display:block;height:100%;background:var(--color-accent);border-radius:99px;}
  .row-btn{cursor:pointer;}
  .row-btn:hover{background:color-mix(in srgb, var(--color-text) 4%, transparent);}
  .chip{cursor:pointer;font-family:var(--font-body);font-size:13px;padding:6px 12px;border:1px solid var(--color-divider);border-radius:99px;background:var(--color-bg);user-select:none;}
  .chip:hover{border-color:var(--color-accent);}
  .chip[data-on="1"]{background:var(--color-accent);color:var(--color-bg);border-color:var(--color-accent);}
  .step{cursor:pointer;flex:1;text-align:center;padding:9px 4px;font-size:12px;font-family:var(--font-heading);font-weight:600;border:1px solid var(--color-divider);background:var(--color-bg);color:var(--color-text);}
  .step:hover{background:color-mix(in srgb, var(--color-accent) 8%, transparent);}
  .step + .step{border-left:0;}
  .step[data-on="1"]{background:var(--color-accent);color:var(--color-bg);border-color:var(--color-accent);}
  .step[data-on="2"]{background:var(--color-accent-100);border-color:var(--color-accent);color:var(--color-accent-800);}
  .sec-label{font-family:var(--font-heading);font-weight:600;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--color-accent);}
  select.input{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23201e1d' stroke-width='1.5' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}
  .num-plate{font-family:var(--font-heading);font-weight:600;font-variant-numeric:tabular-nums;}
  /* El tema corporativo va SIEMPRE en <html data-theme="ecodrill">: nunca sin el. */
  [data-theme="ecodrill"]{
    --color-accent:#5f7d18;--color-accent-600:#527014;--color-accent-700:#425a10;--color-accent-800:#33470c;--color-accent-100:#eef4d8;
    --color-accent-2:#b5613a;--color-accent-2-100:#f5e8e0;--color-accent-2-800:#5e2f1a;
  }
  .brand-strip{height:3px;background:#c2d64a;}
  .mark-water{position:absolute;pointer-events:none;opacity:0.08;}
  .risk-dot{display:inline-block;width:10px;height:10px;border-radius:50%;}

  /* ── Responsividad (DECISION del prompt; la plantilla se dibujo a 1180 px) ── */
  .grid-login{display:grid;grid-template-columns:1.1fr 0.9fr;gap:var(--space-8);align-items:center;padding:var(--space-8) 0;}
  .grid-panorama{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--space-8);align-items:start;}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);}
  .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--space-4);}
  .grid-qr{display:grid;grid-template-columns:auto 1fr;gap:var(--space-8);align-items:start;}
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--space-6);}
  .form-actions{display:flex;gap:var(--space-3);justify-content:flex-end;border-top:1px solid var(--color-divider);padding-top:var(--space-4);position:sticky;bottom:0;background:var(--color-bg);}
  .nav-toggle{display:none;}
  .app-nav{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;}
  @media (max-width:900px){
    .app-shell{padding:0 var(--space-3) var(--space-6);}
    .grid-login,.grid-panorama,.grid-2,.grid-3,.grid-qr{grid-template-columns:1fr;}
    .mark-water{display:none;}
    .kpis{grid-template-columns:1fr 1fr;}
    .kpi-num{font-size:40px;}
    .nav-toggle{display:inline-flex;}
    .app-nav{display:none;flex-direction:column;align-items:stretch;gap:var(--space-2);width:100%;}
    .app-nav[data-abierta="1"]{display:flex;}
    .table-cards thead{display:none;}
    .table-cards tr{display:block;border-bottom:1px solid var(--color-divider);padding:var(--space-2) 0;}
    .table-cards td{display:flex;justify-content:space-between;gap:var(--space-3);border:0;padding:4px 0;}
    .table-cards td::before{content:attr(data-label);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 60%,transparent);}
  }
  /* Titulos por CLASE: un font-size en linea gana a la media query y a 360 px desbordaba (medido). */
  .h1-login{font-size:58px;line-height:0.98;margin:0 0 var(--space-4);overflow-wrap:anywhere;}
  .h1-shell{font-size:40px;margin:0;}
  .logo-login{display:block;margin-bottom:var(--space-4);max-width:min(383px,100%);height:auto;}
  .form-login{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-4);}
  .grid-login > *,.grid-panorama > *,.grid-2 > *,.grid-3 > *{min-width:0;}
  @media (max-width:900px){ .h1-login{font-size:44px;} }
  @media (max-width:400px){ .kpis{grid-template-columns:1fr;} .h1-login{font-size:36px;} .h1-shell{font-size:30px;} .form-login{padding:var(--space-4);} }

  /* ── Fase 2: shell, avisos, dialogos y configuracion ── */
  a.navlink{text-decoration:none;display:inline-block;}
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  html.js [data-solo-sin-js]{display:none;}
  .selector-proyecto{display:inline-flex;align-items:center;gap:6px;}
  .aviso{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-2) var(--space-3);margin-bottom:var(--space-4);border-radius:var(--radius-md);font-size:14px;background:var(--color-accent-100);color:var(--color-accent-800);}
  .aviso-error{background:var(--color-accent-2-100);color:var(--color-accent-2-800);}
  .temporal{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;letter-spacing:0.04em;padding:4px 10px;border-radius:var(--radius-sm);background:var(--color-bg);border:1px solid var(--color-divider);user-select:all;}
  .dialog-backdrop[hidden]{display:none;}
  .dialog-backdrop{z-index:50;overflow:auto;}
  .dialog-ancho{width:min(640px,100%);}
  .dialog-form{display:flex;flex-direction:column;gap:var(--space-3);}
  .check{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;flex-wrap:wrap;}
  .check input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-accent);}
  .fieldset{border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);margin:0;}
  .chips{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);}
  .cfg-seccion{margin-bottom:var(--space-8);scroll-margin-top:var(--space-4);}
  .sec-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3);}
  .sub-nav{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-3);font-size:13px;}
  .sub-nav a{text-decoration:none;}
  .acciones{white-space:nowrap;}
  .table td .tag{white-space:nowrap;}
  .table .input{min-height:32px;padding:4px 8px;}
  .color-input{width:36px;height:32px;padding:2px;border:1px solid var(--color-divider);border-radius:var(--radius-md);background:var(--color-surface);cursor:pointer;}
  .table-niveles .risk-dot{vertical-align:middle;}
  @media (max-width:900px){
    .table-cards td[data-label=""]{justify-content:flex-end;}
    .table-cards .acciones{white-space:normal;}
    .table-niveles{display:block;}
    .table-niveles thead{display:none;}
    .table-niveles tbody,.table-niveles tr{display:block;}
    .table-niveles tr{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);border-bottom:1px solid var(--color-divider);padding:var(--space-3) 0;}
    .table-niveles td{display:block;border:0;padding:0;}
    .table-niveles td::before{content:attr(data-label);display:block;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 60%,transparent);margin-bottom:3px;}
    .table-niveles td[data-label="Nivel"]{grid-column:1 / -1;}
    .dialog{max-height:calc(100vh - 2 * var(--space-4));overflow:auto;}
    .form-actions{flex-wrap:wrap;}
  }

  /* ── Fase 3: QR, letrero y formulario publico ── */
  .card-qr{padding:0;overflow:hidden;width:300px;max-width:100%;}
  .qr-svg{width:220px;height:220px;}
  .qr-svg svg{width:100%;height:100%;display:block;shape-rendering:crispEdges;}
  .letrero{max-width:720px;margin:0 auto;}
  .letrero-hoja{background:var(--color-surface);border:1px solid var(--color-divider);padding:0 var(--space-6) var(--space-6);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);}
  .letrero-hoja .brand-strip{width:calc(100% + 2 * var(--space-6));margin:0 calc(-1 * var(--space-6)) var(--space-4);}
  .letrero-logo{max-width:220px;height:auto;}
  .letrero-titulo{font-size:34px;line-height:1.05;margin:0;max-width:520px;}
  .letrero-proyecto{font-family:var(--font-heading);font-weight:600;font-size:22px;letter-spacing:0.06em;text-transform:uppercase;color:var(--color-accent);}
  .letrero-qr{width:min(420px,80vw);height:auto;}
  .letrero-qr svg{width:100%;height:auto;display:block;shape-rendering:crispEdges;}
  .letrero-instruccion{font-size:17px;max-width:460px;margin:0;}
  .letrero-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;overflow-wrap:anywhere;padding:6px 12px;border:1px solid var(--color-divider);border-radius:var(--radius-md);}
  .letrero-pie{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:color-mix(in srgb,var(--color-text) 60%,transparent);margin-top:var(--space-2);}
  @media print{
    @page{size:auto;margin:12mm;}
    html,body{background:#fff;}
    .no-print{display:none !important;}
    .app-shell{max-width:none;padding:0;}
    .letrero{max-width:none;}
    .letrero-hoja{border:0;background:#fff;min-height:calc(100vh - 24mm);justify-content:center;}
    .letrero-qr{width:120mm;}
  }
  .publico{max-width:600px;margin:0 auto;}
  .publico-cab{display:flex;align-items:center;gap:var(--space-3);padding-bottom:var(--space-2);}
  .publico-logo{height:32px;width:auto;}
  .publico-form{display:flex;flex-direction:column;gap:var(--space-3);}
  .publico-form .field{margin:0;}
  .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
  .fieldset-chips{border:0;padding:0;margin:0;}
  .fieldset-chips legend{display:block;font-size:12px;margin-bottom:5px;color:color-mix(in srgb,var(--color-text) 70%,transparent);padding:0;}
  .chip input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
  .chip{position:relative;display:inline-flex;align-items:center;min-height:36px;}
  .chip:has(input:checked){background:var(--color-accent);color:var(--color-bg);border-color:var(--color-accent);}
  .chip:has(input:focus-visible){outline:2px solid var(--color-accent);outline-offset:2px;}
  .fotos-preview{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:6px;}
  .fotos-preview figure{margin:0;width:96px;}
  .fotos-preview img{width:96px;height:96px;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--color-divider);display:block;}
  .fotos-preview figcaption{font-size:11px;text-align:center;color:color-mix(in srgb,var(--color-text) 60%,transparent);}
  input[type=file].input{padding:6px;}
  .folio-grande{font-family:var(--font-heading);font-weight:600;font-size:56px;letter-spacing:0.02em;color:var(--color-accent);line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
  @media (max-width:400px){ .folio-grande{font-size:44px;} .letrero-titulo{font-size:26px;} }

  /* ── Fase 4: lista, detalle y formulario interno de hallazgos ── */
  .filtros{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:flex-end;margin-bottom:var(--space-4);}
  .filtros .field{min-width:150px;flex:1 1 150px;margin:0;}
  .filtros .filtro-q{flex:2 1 220px;}
  .filtros .conteo{margin-left:auto;font-size:13px;align-self:center;}
  .tabla-hallazgos td[data-label="Hallazgo"]{font-size:14px;}
  .avance{display:flex;align-items:center;gap:8px;}
  .avance .track{flex:1;min-width:60px;}
  tr[data-href]{cursor:pointer;}
  .paginacion{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:var(--space-4);}
  .fila-meta{display:flex;gap:var(--space-6);flex-wrap:wrap;border-top:1px solid var(--color-divider);border-bottom:1px solid var(--color-divider);padding:var(--space-3) 0;margin-bottom:var(--space-6);}
  .meta-k{font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:color-mix(in srgb,var(--color-text) 60%,transparent);}
  .meta-v{font-family:var(--font-heading);font-weight:600;}
  .fotos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-3);}
  .fotos-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-md);border:1px solid var(--color-divider);display:block;}
  .acciones-detalle{display:flex;gap:var(--space-3);flex-wrap:wrap;}
  .bitacora td{vertical-align:top;}
  .seccion-form{margin-bottom:var(--space-6);}
  .seccion-form .sec-label{margin-bottom:var(--space-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  .seccion-form .field{margin-bottom:var(--space-3);}
  .seccion-ssmac{border:1px solid var(--color-divider);padding:var(--space-4);}
  .steps{display:flex;}
  .step{position:relative;flex:1;text-align:center;padding:9px 4px;font-size:12px;font-family:var(--font-heading);font-weight:600;border:1px solid var(--color-divider);background:var(--color-bg);color:var(--color-text);cursor:pointer;user-select:none;}
  .step + .step{border-left:0;}
  .step input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
  .step-sub{font-weight:400;font-size:10px;opacity:0.85;}
  .step:hover{background:color-mix(in srgb,var(--color-accent) 8%,transparent);}
  .step:has(input:checked){background:var(--color-accent);color:var(--color-bg);border-color:var(--color-accent);}
  .step:has(~ .step input:checked){background:var(--color-accent-100);border-color:var(--color-accent);color:var(--color-accent-800);}
  .step:has(input:disabled){cursor:not-allowed;opacity:0.55;}
  .step:has(input:checked:disabled){opacity:1;}
  .step:has(input:focus-visible){outline:2px solid var(--color-accent);outline-offset:-2px;}
  fieldset[disabled] .chip{opacity:0.6;cursor:not-allowed;}
  .input:disabled,select.input:disabled,textarea.input:disabled{opacity:0.7;background:color-mix(in srgb,var(--color-surface) 60%,var(--color-bg));cursor:not-allowed;}
  @media (max-width:900px){
    .filtros .conteo{margin-left:0;width:100%;}
    .tabla-fechas.table-cards td{display:block;}
    .tabla-fechas.table-cards td::before{display:block;margin-bottom:2px;}
    .bitacora.table-cards td[data-label="Detalle"]{display:block;}
    .bitacora.table-cards td[data-label="Detalle"]::before{display:block;}
    .steps{flex-wrap:wrap;}
    .step{flex:1 1 30%;}
    .step + .step{border-left:1px solid var(--color-divider);}
  }
