:root{
    --papel:#F4F4F5; --tinta:#18181B; --verde:#18181B; --verde-osc:#000000;
    --kraft:#71717A; --rojo:#9C3A2E; --linea:#E4E4E7; --blanco:#FFFFFF;
  }
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
  html{-webkit-text-size-adjust:100%;}
  body{
    font-family:-apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
    background:var(--papel); color:var(--tinta); min-height:100vh;
    padding-bottom:calc(30px + env(safe-area-inset-bottom));
  }
  header{
    background:var(--blanco); color:var(--tinta); border-bottom:1px solid var(--linea);
    padding:calc(14px + env(safe-area-inset-top)) 16px 14px;
    position:sticky; top:0; z-index:20;
  }
  header h1{font-size:20px; font-weight:800;}
  header .sub{font-size:12px; opacity:.85; margin-top:2px;}
  header .cont{display:flex; justify-content:space-between; align-items:center;}
  .badge{
    font-variant-numeric:tabular-nums; font-size:14px; font-weight:700;
    background:#F0F0F2; border:1px solid var(--linea); color:var(--tinta);
    border-radius:20px; padding:5px 13px;
  }
  main{max-width:640px; margin:0 auto; padding:16px 14px;}
  .tarjeta{
    background:var(--blanco); border:1px solid var(--linea); border-radius:14px;
    padding:16px; box-shadow:0 1px 4px rgba(24,24,27,.06); margin-bottom:16px;
  }
  .tarjeta h2{font-size:16px; font-weight:800; margin-bottom:4px; color:var(--verde);}
  details.tarjeta{padding:0;}
  details.tarjeta summary{
    list-style:none; cursor:pointer; padding:16px;
    font-size:16px; font-weight:800; color:var(--verde);
    display:flex; justify-content:space-between; align-items:center;
  }
  details.tarjeta summary::-webkit-details-marker{display:none;}
  details.tarjeta summary::after{content:'▾'; color:#7B857F; transition:transform .2s;}
  details[open].tarjeta summary::after{transform:rotate(180deg);}
  details.tarjeta .interior{padding:0 16px 16px;}
  .grupo{
    font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
    color:var(--kraft); margin-top:18px; padding-bottom:5px; border-bottom:1px solid var(--linea);
  }
  label{display:block; font-size:12px; font-weight:700; margin:12px 0 6px; letter-spacing:.3px; text-transform:uppercase; color:#5A6660;}
  input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea{
    width:100%; padding:13px; border:1px solid var(--linea); border-radius:10px;
    font-size:17px; background:#FAFAF7; color:var(--tinta); font-family:inherit;
    appearance:none; -webkit-appearance:none;
  }
  input:focus, select:focus, textarea:focus{outline:2px solid var(--verde); background:#fff;}
  .fila4{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:8px;}
  .fila3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}
  .fila2{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .checks{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px;}
  .check{
    display:flex; align-items:center; gap:10px; border:1.5px solid var(--linea);
    border-radius:10px; padding:13px; background:#FAFAF7; cursor:pointer;
    font-size:16px; font-weight:600; user-select:none;
  }
  .check input{width:22px; height:22px; accent-color:var(--verde); flex-shrink:0;}
  .check.activo{border-color:var(--verde); background:#F0F0F2;}
  .fotos{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:6px;}
  .slot{
    aspect-ratio:3/4; border:2px dashed var(--linea); border-radius:10px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-size:12px; color:#7B857F; overflow:hidden; position:relative;
    background:#FAFAF7; text-align:center; gap:4px;
  }
  .slot .ico{font-size:26px;}
  .slot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
  .slot .quitar{
    position:absolute; top:5px; right:5px; background:rgba(24,24,27,.78); color:#fff;
    border:none; border-radius:50%; width:28px; height:28px; font-size:14px;
    display:none; align-items:center; justify-content:center; z-index:2;
  }
  .slot.lleno .quitar{display:flex;}
  .slot.lleno{border-style:solid; border-color:var(--verde);}
  .slot.falta{border-color:var(--rojo); background:#FBF1EF;}
  .nota-fotos{font-size:12.5px; color:#7B857F; margin-top:6px;}
  button{
    font-family:inherit; font-weight:700; font-size:17px;
    border:none; border-radius:12px; padding:16px; cursor:pointer;
    min-height:52px;
  }
  .botones{display:flex; gap:8px; margin-top:18px;}
  .btn-primario{background:var(--verde); color:#fff; flex:1;}
  .btn-primario:active{background:var(--verde-osc);}
  .btn-primario:disabled{opacity:.5;}
  .btn-fantasma{background:transparent; color:#5A6660; border:1.5px solid var(--linea);}
  .btn-meta{background:var(--verde); color:#fff; width:100%; margin-top:16px; font-size:15px; min-height:46px; padding:12px;}
  .exportar{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:4px 0 18px;}
  .btn-excel{background:var(--papel); color:var(--tinta); border:1px solid var(--linea); font-size:15px;}
  .btn-zip{background:var(--papel); color:var(--tinta); border:1px solid var(--linea); font-size:15px;}
  .btn-excel:disabled,.btn-zip:disabled{opacity:.45;}
  .seccion-titulo{margin:6px 0 10px;}
  .seccion-titulo h2{font-size:16px; font-weight:800; color:var(--verde);}
  .ficha{
    background:var(--blanco); border:1px solid var(--linea); border-radius:12px;
    margin-bottom:12px; display:flex; overflow:hidden;
    box-shadow:0 1px 3px rgba(24,24,27,.07);
  }
  .lomo{
    width:42px; background:var(--verde); color:#fff; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .lomo span{
    writing-mode:vertical-rl; transform:rotate(180deg);
    font-size:13px; font-weight:700; letter-spacing:1px; font-variant-numeric:tabular-nums;
  }
  .ficha-cuerpo{padding:12px; flex:1; min-width:0;}
  .ficha-cuerpo h3{font-size:16px; font-weight:800; word-break:break-word;}
  .ubi{
    display:inline-block; font-size:11.5px; font-weight:700; color:var(--verde);
    background:#E7EEE9; border-radius:6px; padding:3px 8px; margin-top:6px;
    letter-spacing:.3px;
  }
  .meta{font-size:13px; color:#5A6660; margin-top:6px; line-height:1.55;}
  .meta b{color:var(--tinta);}
  .minis{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap;}
  .minis img{width:52px; height:68px; object-fit:cover; border-radius:6px; border:1px solid var(--linea);}
  .acciones{display:flex; gap:6px; margin-top:12px; flex-wrap:wrap;}
  .acciones button{font-size:14px; padding:11px 14px; min-height:44px; border-radius:9px;}
  .btn-pdf,.btn-editar{background:#EDEFE9; color:var(--tinta); border:1px solid var(--linea);}
  .btn-borrar{background:transparent; color:var(--rojo); border:1px solid #E3C6C0;}
  .vacio{
    text-align:center; padding:38px 20px; color:#7B857F; font-size:15px;
    border:2px dashed var(--linea); border-radius:14px; line-height:1.7;
  }
  .toast{
    position:fixed; bottom:calc(20px + env(safe-area-inset-bottom)); left:50%;
    transform:translateX(-50%);
    background:var(--tinta); color:#fff; font-size:14px; padding:12px 20px;
    border-radius:24px; z-index:50; display:none; max-width:90%;
    box-shadow:0 4px 14px rgba(0,0,0,.3); text-align:center;
  }
  .procesando{
    position:fixed; inset:0; background:rgba(242,243,238,.9); z-index:60;
    display:none; align-items:center; justify-content:center; flex-direction:column; gap:12px;
    font-size:16px; font-weight:700; color:var(--verde); text-align:center; padding:20px;
  }
  .spinner{
    width:40px; height:40px; border:4px solid var(--linea); border-top-color:var(--verde);
    border-radius:50%; animation:gira 1s linear infinite;
  }
  @keyframes gira{to{transform:rotate(360deg);}}
  /* ===== Panel de opciones de exportación ===== */
  .modal{
    position:fixed; inset:0; background:rgba(31,43,38,.55); z-index:70;
    display:none; align-items:flex-end; justify-content:center;
  }
  .modal.abierto{display:flex;}
  .modal-caja{
    background:var(--blanco); border-radius:18px 18px 0 0; width:100%; max-width:640px;
    padding:20px 16px calc(20px + env(safe-area-inset-bottom));
    max-height:88vh; overflow-y:auto;
  }
  .modal-caja h2{font-size:17px; font-weight:800; color:var(--verde); margin-bottom:4px;}
  .modal-caja .ayuda{font-size:12.5px; color:#7B857F; margin-bottom:14px;}
  .rapidos{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:6px;}
  .rapidos button{
    background:#EDEFE9; color:var(--tinta); border:1px solid var(--linea);
    font-size:14px; padding:12px; min-height:46px; border-radius:10px; font-weight:600;
  }
  .rapidos button.sel{background:var(--verde); color:#fff; border-color:var(--verde);}
  .resumen-exp{
    background:#EDF4EF; border:1px solid #CBDDD2; border-radius:10px;
    padding:12px; font-size:14px; font-weight:700; color:var(--verde);
    text-align:center; margin:12px 0;
  }
  .resumen-exp small{display:block; font-weight:500; color:#5A6660; margin-top:3px; font-size:12px;}
  /* ===== Login ===== */
  .login{
    position:fixed; inset:0; background:var(--papel); z-index:100;
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .login-caja{
    background:var(--blanco); border:1px solid var(--linea); border-radius:16px;
    padding:26px 22px; width:100%; max-width:380px;
    box-shadow:0 4px 20px rgba(24,24,27,.12);
  }
  .login-caja h1{font-size:20px; font-weight:800; color:var(--verde); text-align:center;}
  .login-caja .sub{font-size:12.5px; color:#7B857F; text-align:center; margin-top:4px;}
  .login-caja .amb{
    display:block; text-align:center; margin:10px auto 0; width:fit-content;
    font-size:11px; font-weight:800; letter-spacing:1px; color:#7A5C00;
    background:#F6ECCF; border:1px solid #E4D9B4; border-radius:12px; padding:3px 10px;
  }
  .login-error{
    display:none; font-size:13px; color:var(--rojo); background:#F9EDEB;
    border:1px solid #E3C6C0; border-radius:8px; padding:10px 12px; margin-top:12px;
  }
  .fila-sesion{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    margin-top:8px; font-size:12px;
  }
  .quien{opacity:.9;}
  .btn-salir{
    background:var(--papel); color:var(--tinta); border:1px solid var(--linea);
    font-size:12px; font-weight:700; padding:5px 12px; min-height:0; border-radius:14px;
  }
  .sync{
    display:none; font-size:12px; font-weight:700; border-radius:12px; padding:3px 10px;
  }
  .sync.pend{display:inline-block; background:#F6ECCF; color:#7A5C00;}
  .sync.off{display:inline-block; background:#F9EDEB; color:var(--rojo);}
  .nube{font-size:11px; color:#7B857F;}
  .autor{font-size:11px; color:#7B857F; font-weight:600;}
  .paginacion{
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding:12px 8px; margin:4px 0;
    flex-wrap:wrap;
  }
  .pag-btn{
    padding:9px 16px; border:1px solid #CBD3CE; border-radius:10px;
    background:#fff; color:#2C332F; font-size:14px; font-weight:700;
    cursor:pointer; min-height:40px;
  }
  .pag-btn:disabled{opacity:.4; cursor:default;}
  .pag-btn:not(:disabled):active{background:#EEF2EF;}
  .pag-info{font-size:12px; color:#5A6660; text-align:center; flex:1; min-width:120px;}

  .nav-modulos{display:flex; gap:6px; background:var(--blanco); border-bottom:1px solid var(--linea); padding:8px 14px;
    overflow-x:auto; position:sticky; top:var(--header-h,60px); z-index:19;}
  .nav-modulo-btn{flex:1; min-width:max-content; background:transparent; color:#52525B;
    opacity:1; border:none; padding:10px 12px; border-radius:10px; font-size:13px;
    font-weight:700; min-height:0;}
  .nav-modulo-btn.activo{background:#F0F0F2; color:var(--tinta);}
  .modulo{display:none;}
  .modulo.activo{display:block;}

  .sidebar{ display:none; background:var(--blanco); color:var(--tinta); border-right:1px solid var(--linea); }
  .sidebar-inner{ display:flex; flex-direction:column; gap:4px; padding:20px 14px; }
  .sidebar-marca{ margin-bottom:18px; }
  .sidebar-marca h1{ font-size:18px; margin:0; color:var(--tinta); }
  .sidebar-marca .sub{ font-size:12px; color:#71717A; }
  .sidebar .nav-modulo-btn{ flex:none; width:100%; text-align:left; padding:12px 14px; }

  .fila2-desktop{display:block;}

  @media (min-width:1024px){
    body{ display:grid; grid-template-columns:240px 1fr; min-height:100vh; }
    .sidebar{ display:block; grid-column:1; }
    .sidebar-inner{ position:sticky; top:0; }
    .app-content{ grid-column:2; min-width:0; }
    .nav-modulos{ display:none; }

    main.modulo.activo{
      max-width:1440px; width:100%;
      display:grid; grid-template-columns:380px 1fr; gap:16px; align-items:start;
    }
    main.modulo > #cajaMigracion,
    main.modulo > .exportar,
    main.modulo > .seccion-titulo,
    main.modulo > #lista{ grid-column:1/-1; }

    .fila2-desktop{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  }

  /* ===== Archivo de gestión y archivo central ===== */
  .modulo-archivo{max-width:640px; margin:0 auto; padding:16px 14px;}
  .ayuda-modulo{font-size:13px; color:#7B857F; line-height:1.5; margin:6px 0 0;}
  .busc-fila{display:flex; gap:8px; margin-top:12px;}
  .busc-fila input{flex:1; min-width:0;}
  .busc-fila .btn-primario{flex:none; width:auto; padding:0 18px; min-height:48px;}
  input[type=search]{
    width:100%; padding:13px; border:1px solid var(--linea); border-radius:10px;
    font-size:17px; background:#FAFAF7; color:var(--tinta); font-family:inherit;
    appearance:none; -webkit-appearance:none;
  }
  .rejilla-doc{display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:end;}
  .rejilla-doc .ancho{grid-column:1/-1;}
  .rejilla-doc label{margin-top:10px;}
  .barra-res{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    flex-wrap:wrap; margin:2px 0 12px;
  }
  .res-info{font-size:13px; font-weight:700; color:#5A6660;}
  .barra-acciones{display:flex; gap:6px;}
  .btn-mini{
    background:#EDEFE9; color:var(--tinta); border:1px solid var(--linea);
    font-size:13px; font-weight:700; padding:8px 12px; min-height:0; border-radius:9px;
  }
  .btn-mini:active{background:#E1E5DD;}

  .doc{
    background:var(--blanco); border:1px solid var(--linea); border-radius:12px;
    margin-bottom:10px; display:flex; overflow:hidden;
    box-shadow:0 1px 3px rgba(24,24,27,.07);
  }
  .doc-ubi{
    width:112px; flex-shrink:0; background:var(--verde); color:#fff;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; padding:10px 6px; text-align:center;
    font-size:12px; font-weight:800; letter-spacing:.3px; line-height:1.3;
  }
  .doc-ubi span{display:block; word-break:break-word;}
  .doc-ubi .sin-ubi{font-weight:600; opacity:.7; font-size:11px;}
  .doc-cuerpo{padding:11px 12px; flex:1; min-width:0;}
  .doc-cuerpo h3{font-size:15px; font-weight:800; word-break:break-word; line-height:1.35;}
  .doc-linea{font-size:12.5px; color:#5A6660; margin-top:4px;}
  .doc-concepto{
    font-size:12.5px; color:#5A6660; margin-top:5px; line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .doc-pie{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px;}

  /* Ficha de detalle */
  .det-ubi{
    background:var(--verde); color:#fff; border-radius:10px; padding:12px;
    font-size:15px; font-weight:800; text-align:center; margin-bottom:12px;
  }
  .det-fila{
    display:flex; justify-content:space-between; gap:14px;
    padding:8px 0; border-bottom:1px solid var(--linea); font-size:14px;
  }
  .det-fila span{color:#7B857F; flex-shrink:0;}
  .det-fila b{text-align:right; word-break:break-word;}
  .det-origen{font-size:12px; color:#7B857F; margin-top:12px; font-style:italic;}
  #modalDoc .btn-borrar{flex:none; padding:16px;}

  /* Importador de hojas */
  .mapeo{display:flex; flex-direction:column; gap:6px; margin-top:6px;}
  .mapeo-fila{display:grid; grid-template-columns:1fr 1.2fr; gap:8px; align-items:center;}
  .mapeo-fila span{font-size:12.5px; font-weight:700; color:#5A6660;}
  .mapeo-fila select{padding:9px; font-size:14px;}
  .aviso-imp{
    background:#F6ECCF; border:1px solid #E4D9B4; border-radius:10px;
    padding:11px 12px; font-size:12.5px; color:#5A4500; margin-top:12px; line-height:1.5;
  }
  #impBarra{margin-top:12px;}
  #impBarra .barra{height:10px; background:var(--linea); border-radius:6px; overflow:hidden;}
  #impBarra .barra i{display:block; height:100%; width:0; background:var(--verde); transition:width .2s;}
  #impBarra .barra-txt{font-size:12.5px; color:#5A6660; text-align:center; margin-top:6px;}

  @media (min-width:1024px){
    .modulo-archivo{max-width:1100px; padding:20px;}
    .rejilla-doc{grid-template-columns:repeat(3, 1fr);}
    .doc-ubi{width:150px; font-size:13px;}
    .doc-concepto{-webkit-line-clamp:1;}
    .mapeo{display:grid; grid-template-columns:1fr 1fr; gap:8px 16px;}
  }

  /* Identificador del documento: es el dato por el que se busca a diario */
  .doc-id{
    font-variant-numeric:tabular-nums; letter-spacing:.4px;
    background:#F0F0F2; border:1px solid var(--linea); border-radius:6px;
    padding:1px 7px; margin-right:4px; display:inline-block;
  }
  .det-id{
    font-size:19px; font-weight:800; text-align:center; letter-spacing:.5px;
    font-variant-numeric:tabular-nums; margin-bottom:10px;
  }
  .pista-busq{font-size:12px; color:#7B857F; line-height:1.5; margin-top:10px;}
  .sub-plegable{border-top:1px solid var(--linea); margin-top:18px; padding-top:4px;}
  .sub-plegable summary{
    list-style:none; cursor:pointer; padding:12px 0;
    font-size:11px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--kraft);
    display:flex; justify-content:space-between; align-items:center;
  }
  .sub-plegable summary::-webkit-details-marker{display:none;}
  .sub-plegable summary::after{content:'▾'; color:#7B857F; transition:transform .2s;}
  .sub-plegable[open] summary::after{transform:rotate(180deg);}

  /* ===== Navegación por niveles (Dependencia › Empresa › Serie) ===== */
  .migas{display:flex; flex-wrap:wrap; align-items:center; gap:2px; margin-bottom:4px;}
  .miga{
    background:transparent; border:none; padding:4px 6px; min-height:0;
    font-size:13px; font-weight:700; color:#5A6660; border-radius:7px;
  }
  .miga:last-of-type{color:var(--tinta); background:#F0F0F2;}
  .miga-sep{color:#A1A1AA; font-size:13px;}
  .mosaico{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .ficha-nivel{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    background:var(--blanco); border:1px solid var(--linea); border-radius:11px;
    padding:14px 13px; min-height:0; text-align:left; font-size:14px; font-weight:700;
    color:var(--tinta);
  }
  .ficha-nivel:active{background:#F0F0F2;}
  .fn-nombre{min-width:0; word-break:break-word; line-height:1.3;}
  .fn-n{
    flex-shrink:0; font-size:12px; font-weight:800; color:#5A6660;
    background:#F0F0F2; border-radius:20px; padding:3px 9px; font-variant-numeric:tabular-nums;
  }
  .doc-empresa{
    display:block; font-size:11.5px; font-weight:700; color:var(--kraft);
    letter-spacing:.3px; margin-top:3px; text-transform:uppercase;
  }
  .det-empresa{
    text-align:center; font-size:13px; font-weight:700; color:#5A6660;
    margin:-4px 0 10px; text-transform:uppercase; letter-spacing:.3px;
  }
  .mapeo-ctrl{display:flex; flex-direction:column; gap:5px;}
  .mapeo-ctrl input.fijo{padding:9px; font-size:14px; background:#FFFDF2; border-color:#E4D9B4;}

  @media (min-width:1024px){
    .mosaico{grid-template-columns:repeat(3, 1fr);}
  }