:root{
    /* ---- Paleta real del Manual de Marca INROUTE ---- */
    --apple-green:#97B72C;
    --apple-green-dark:#748C22;
    --gunmetal:#1E3238;
    --outer-space:#414644;
    --cadet-gray:#939E9A;
    --pear:#CBD127;
    --eerie-black:#242625;

    --bg:#F6F7F5;
    --surface:#FFFFFF;
    --border:#E4E7E2;
    --border-strong:#CBD0D8;
    --text:var(--eerie-black);
    --text-secondary:var(--outer-space);
    --text-muted:var(--cadet-gray);
    --accent:var(--apple-green);
    --accent-hover:var(--apple-green-dark);
    --accent-soft:rgba(151,183,44,.12);
    --on-accent:var(--gunmetal);
    --radius:10px;
    --radius-lg:14px;
    --danger:#A8433A;
    --danger-bg:rgba(168,67,58,.12);
    --warn-text:#8A8F1A;
    --warn-bg:rgba(203,209,39,.20);
    --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --font-display:'Poppins',var(--font);
    --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --st-borrador-bg:rgba(147,158,154,.16); --st-borrador-text:var(--outer-space);
    --st-pendiente-bg:rgba(203,209,39,.22); --st-pendiente-text:#8A8F1A;
    --st-aprobado-bg:rgba(151,183,44,.15); --st-aprobado-text:var(--apple-green-dark);
    --st-noaprobado-bg:rgba(168,67,58,.12); --st-noaprobado-text:#A8433A;
    --st-cambios-bg:rgba(65,70,68,.10); --st-cambios-text:var(--outer-space);
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5;}
  h1,h2,h3,.brand{font-family:var(--font-display);letter-spacing:-.01em;}
  .topbar{background:#414644;border-bottom:1px solid #2b302e;padding:14px 24px;position:sticky;top:0;left:0;width:100%;z-index:55;overflow:hidden;}
  /* Ondas de señal del isotipo, como textura discreta de marca. */
  .topbar::before{content:"";position:absolute;top:-70px;right:80px;width:200px;height:200px;border:3px solid rgba(151,183,44,.14);border-radius:50%;pointer-events:none;}
  .topbar .brand{color:#fff;}
  .topbar .brand-sub{color:rgba(255,255,255,0.7);}
  .topbar .user-chip{color:rgba(255,255,255,0.85);}
  .topbar .user-chip .rol-tag{background:rgba(255,255,255,0.18);color:#fff;}
  .topbar-inner{max-width:1080px;margin:0 auto;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-left:260px;}
  .brand{font-size:16px;font-weight:600;}
  .brand-sub{font-size:12px;color:var(--text-muted);}
  .topbar-spacer{flex:1;}
  .rol-selector-wrap{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-secondary);}
  .rol-selector-wrap select{width:auto;padding:5px 8px;font-size:12.5px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);}
  .container{max-width:1080px;margin:0 auto;padding:24px;}
  .disclaimer{background:var(--accent-soft);color:#2F3B7A;border:1px solid #D6DDF7;border-radius:var(--radius);padding:10px 14px;font-size:12.5px;margin-bottom:20px;}
  .hidden{display:none !important;}
  .combo-wrap{position:relative;}
  .combo-lista{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;margin-top:0;box-shadow:0 4px 10px rgba(20,24,35,.1);z-index:5;max-height:180px;overflow-y:auto;}
/* Barra flotante de "Solicitar revisión" — aparece solo cuando el botón
   real (el de abajo del todo) ya salió de la vista al hacer scroll. */
.sticky-action-bar{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);padding:10px 24px;box-shadow:0 -4px 12px rgba(20,24,35,.1);z-index:15;display:flex;justify-content:flex-end;transition:transform .15s ease,opacity .15s ease;}
.sticky-action-bar.hidden{display:flex;transform:translateY(100%);opacity:0;pointer-events:none;}
  .combo-opt{padding:7px 10px;font-size:12.5px;cursor:pointer;}
  .combo-opt:hover{background:var(--accent-soft);}

  h1,h2,h3{font-weight:600;margin:0;}
  label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:4px;}
  input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:var(--font);color:var(--text);background:var(--surface);}
  /* Igual que el Listado — los números se ven distintos del texto, no
     hace falta leer con cuidado para saber "esto es un dato". */
  input[type="number"]{font-family:var(--font-mono);text-align:right;}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
  input.input-error{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg);}
  .field{margin-bottom:2px;}
  .field-error{color:var(--danger);font-size:11.5px;display:block;margin-top:3px;}
  .dup-hint{color:var(--warn-text);font-size:11.5px;display:block;margin-top:3px;}
  .hint-muted{color:var(--text-muted);font-size:12px;}

  .btn{padding:8px 14px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);font-size:13px;font-family:var(--font);cursor:pointer;color:var(--text);}
  .btn:disabled{opacity:.45;cursor:not-allowed;}
  .btn:hover{background:var(--bg);}
  .btn-sm{padding:5px 10px;font-size:12.5px;}
  .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
  .btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
  .btn-ghost{background:none;border:none;color:var(--text-secondary);padding:4px 0;font-size:13px;}
  .icon-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:6px;display:inline-flex;align-items:center;}
  .icon-btn:hover{background:var(--bg);color:var(--danger);}

  .badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;}
  .badge-borrador{background:var(--st-borrador-bg);color:var(--st-borrador-text);}
  .badge-pendiente{background:var(--st-pendiente-bg);color:var(--st-pendiente-text);}
  .badge-aprobado{background:var(--st-aprobado-bg);color:var(--st-aprobado-text);}
  .badge-noaprobado{background:var(--st-noaprobado-bg);color:var(--st-noaprobado-text);}
  .badge-cambios{background:var(--st-cambios-bg);color:var(--st-cambios-text);}

  .approve-controls{display:inline-flex;gap:6px;margin-left:8px;}
  .btn-approve,.btn-reject{font-size:11.5px;padding:3px 9px;border-radius:999px;cursor:pointer;background:none;font-family:var(--font);}
  .btn-approve{border:1px solid var(--st-aprobado-text);color:var(--st-aprobado-text);}
  .btn-approve:hover{background:var(--st-aprobado-bg);}
  .btn-reject{border:1px solid var(--st-noaprobado-text);color:var(--st-noaprobado-text);}
  .btn-reject:hover{background:var(--st-noaprobado-bg);}

  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;}
  .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px 16px;}
  /* Punto 2 (rediseño): columnas de ancho variable según el contenido natural del
     campo, en vez de que todos midan igual — evita que "Nombre"/"Dirección" se
     corten mientras "CP"/los IDs sobran de espacio. */
  .grid-ancho{display:grid;grid-template-columns:2.4fr 0.9fr;gap:14px 16px;margin-bottom:12px;}
  .grid-medio{display:grid;grid-template-columns:1.3fr 1fr 0.6fr;gap:14px 16px;margin-bottom:12px;}
  .grid-angosto{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px 16px;}
  .grid-cuatro{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px 16px;}
  .grid-contacto{display:grid;grid-template-columns:1.4fr 0.8fr 1.4fr;gap:14px 16px;}
  /* Punto nuevo (opcional): interruptor "todo junto" / "separado en sub-pestañas".
     No se recuerda entre sesiones a propósito — siempre empieza en "todo junto". */
  .toolbar-modo-editar{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap;}
  .sub-tabs-bar{display:flex;gap:4px;border-bottom:1px solid var(--border);}
  .sub-tab-btn{padding:7px 14px;border:none;background:none;font-size:13px;font-weight:500;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:var(--font);}
  .sub-tab-btn:hover{color:var(--text-secondary);}
  .sub-tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);}
  /* Dirección puede ser larga — en vez de un textarea fijo y grande, empieza del
     tamaño de un campo normal y crece hacia abajo solo si el texto lo necesita. */
  textarea.auto-grow{resize:none;overflow:hidden;min-height:38px;font-family:var(--font);line-height:1.4;}
  .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;}

  .listado-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
  .stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px;}
  .stat-card{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--apple-green);border-radius:var(--radius-lg);padding:14px 16px;cursor:pointer;transition:border-color .15s,transform .15s;}
  .stat-card:hover{border-color:var(--border);border-left-color:var(--apple-green);transform:translateY(-1px);}
  .stat-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
  .stat-card-number{font-family:var(--font-display);font-size:26px;font-weight:700;line-height:1.1;color:var(--text);}
  .stat-card-label{font-size:12px;color:var(--text-secondary);margin-top:3px;font-weight:500;}
  .stat-card-borrador{border-left-color:var(--cadet-gray);}
  .stat-card-pendiente{border-left-color:var(--pear);}
  .stat-card-aprobado{border-left-color:var(--apple-green);}
  .stat-card-noaprobado{border-left-color:var(--danger);}
  .filtros{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
  .filtros input,.filtros select{width:auto;}
  th.sortable{cursor:pointer;user-select:none;white-space:nowrap;}
  th.sortable:hover{color:var(--text-secondary);}
  th.sortable .sort-arrow{display:inline-block;width:12px;color:var(--accent);}
  .search-wrap{position:relative;flex:1;min-width:220px;}
  .search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);}
  .search-wrap input{width:100%;padding-left:32px;}
  table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;}
  th{text-align:left;font-size:11px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:13px 14px;border-bottom:1px solid var(--border);background:#FAFBF9;}
  td{padding:13px 14px;font-size:13.5px;border-bottom:1px solid var(--border);}
  tbody tr{cursor:pointer;}
  tbody tr:hover td{background:#FAFBF6;}
  .empty-row{text-align:center;color:var(--text-muted);padding:24px;cursor:default;}
  .paginacion{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;font-size:13px;color:var(--text-secondary);}
  .paginacion .btn{padding:6px 12px;}

  .tabs-bar{display:flex;gap:4px;border-bottom:1px solid var(--border);margin:16px 0 20px;}
  .tab-btn{padding:10px 16px;border:none;background:none;font-size:13.5px;font-weight:500;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:var(--font);}
  .tab-btn:hover{color:var(--text-secondary);}
  .tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);}
  .detalle-header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 4px;}
  .detalle-header-vista{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 0 4px;}
  .detalle-header-vista .status-cluster{justify-content:center;margin-top:6px;}
  .input-lg{font-size:16px;padding:10px 12px;max-width:560px;}
  /* Pastilla de folio: el prefijo fijo "MX01-" con fondo propio, pegado al
     campo donde sí se escribe, como si fuera un solo bloque continuo. */
  .folio-input-wrap{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:8px;overflow:hidden;max-width:320px;}
  .folio-prefix{background:var(--gunmetal);color:#fff;font-weight:600;padding:0 12px;display:flex;align-items:center;font-size:16px;}
  .folio-input-wrap input{border:none;border-radius:0;flex:1;max-width:none;}
  .folio-input-wrap input:focus{box-shadow:none;outline:2px solid var(--apple-green);outline-offset:-2px;}
  .status-cluster{display:flex;align-items:center;flex-wrap:wrap;gap:4px;}
  .ultima-mod-line{color:var(--text-muted);font-size:12px;margin:0 0 6px;}
  .error-banner{background:var(--danger-bg);border:1px solid #F6C1BC;border-radius:var(--radius);padding:12px 16px;margin-bottom:16px;color:var(--danger);font-size:13px;}
  .error-banner ul{margin:6px 0 0;padding-left:18px;}
  .rs-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
  .rs-title{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px;}
  .resumen-contactos{border-top:1px solid var(--border);margin-top:16px;padding-top:12px;font-size:12.5px;color:var(--text-secondary);}
  .resumen-alerta{color:var(--warn-text);}
  .contactos-section-title{font-size:15px;font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
  .contactos-section-sub{color:var(--text-muted);font-size:12.5px;margin:0 0 14px;}
  .contacto-row{border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:12px;background:var(--surface);}
  .contacto-row-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;}
  .scope-field{max-width:280px;}
  .rs-checklist{display:flex;flex-direction:column;gap:4px;padding-left:2px;}
  .rs-checklist .chk{font-size:12px;}
  .rs-details{border:1px solid var(--border);border-radius:8px;padding:6px 10px;background:var(--surface);}
  .rs-details summary{cursor:pointer;font-size:13px;color:var(--text);list-style:none;display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .rs-details summary::-webkit-details-marker{display:none;}
  .rs-details summary::marker{content:"";}
  .rs-details summary::before{content:"▸";color:var(--text-muted);flex:0 0 auto;transition:transform .15s;}
  .rs-details[open] summary::before{transform:rotate(90deg);}
  .rs-details-body{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}
  .chk-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;}
  .chk{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--text-secondary);}
  .chk-spacer{flex:1;}
  .empty-hint{color:var(--text-muted);font-size:13px;margin:0 0 10px;}
  .detalle-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:16px;border-top:1px solid var(--border);flex-wrap:wrap;gap:10px;}
  .link-historial{color:var(--text-secondary);font-size:13px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
  .link-historial:hover{color:var(--accent);}
  .footer-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

  .info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px 16px;}

  /* Marco único que agrupa Razones Sociales + Contactos bajo el mismo cliente */
  .cliente-marco{border:1px solid var(--border-strong);border-radius:var(--radius-lg);padding:16px;background:var(--bg);margin-bottom:16px;}
  .cliente-marco-titulo{font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
  .cliente-marco-titulo-sep{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);}

  .pendientes-resumen{background:var(--accent-soft);border:1px solid #D6DDF7;border-radius:var(--radius);padding:10px 12px;margin-bottom:14px;}
  .notes-block{margin-top:10px;max-width:500px;}
  .notes-label{font-size:11.5px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;display:block;}
  .notes-block textarea{min-height:80px;resize:vertical;font-size:13px;}
  .notes-block .btn{margin-top:6px;}
  .pendientes-resumen-titulo{font-size:12px;font-weight:600;color:#2F3B7A;margin-bottom:6px;}
  .pendiente-link{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border-strong);border-radius:999px;padding:4px 10px 4px 12px;margin:0 6px 6px 0;font-size:12px;font-family:var(--font);cursor:pointer;color:var(--text);}
  .pendiente-link:hover{border-color:var(--accent);color:var(--accent);}
  .pendiente-link .badge{margin-left:2px;}

  /* Vista compacta: varias tarjetas en cuadrícula, campos en una sola línea "Label: valor" */
  .vista-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px;align-items:start;}
  .card-compact{padding:12px 14px;margin-bottom:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);}
  .info-compact{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 20px;font-size:13px;margin-top:10px;}
  .info-compact-item{display:flex;gap:6px;line-height:1.5;overflow:hidden;}
  .info-compact-label{color:var(--text-muted);white-space:nowrap;}
  .info-compact-value{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .card-compact .resumen-contactos{margin-top:8px;padding-top:6px;font-size:11.5px;}
  .card-compact .motivo-box{padding:6px 10px;margin:6px 0;font-size:11.5px;}
  .card-compact .rs-card-header{margin-bottom:4px;}
  .card-compact .contacto-row-top{margin-bottom:4px;}
  .vista-item-titulo{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:6px;}
  .info-label{font-size:11.5px;color:var(--text-muted);margin-bottom:2px;}
  .info-value{font-size:13.5px;color:var(--text);}

  .diff-box{background:var(--accent-soft);border:1px solid rgba(151,183,44,.35);border-radius:var(--radius);padding:10px 12px;margin:12px 0;font-size:12.5px;}
  .diff-box-title{font-weight:600;color:var(--apple-green-dark);margin-bottom:6px;}
  .diff-item{color:var(--text-secondary);margin-bottom:3px;}
  .diff-field{font-weight:600;color:var(--text);}
  .diff-arrow{color:var(--accent);margin:0 4px;}
  .motivo-box{background:var(--danger-bg);border:1px solid #F6C1BC;border-radius:var(--radius);padding:10px 12px;margin:10px 0;font-size:12.5px;color:var(--danger);}

  .modal-overlay{position:fixed;inset:0;background:rgba(15,18,25,.45);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;}
  .modal-box{background:var(--surface);border-radius:var(--radius-lg);padding:24px;max-width:460px;width:100%;box-shadow:0 12px 32px rgba(20,24,35,.18);max-height:85vh;overflow-y:auto;}
  .modal-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
  .modal-actions{display:flex;justify-content:flex-end;margin-top:18px;}
  .email-preview{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
  .email-label{font-size:11px;color:var(--text-muted);margin:0 0 4px;}
  .email-subject{font-size:14.5px;font-weight:600;margin:0 0 14px;}
  .email-body{font-size:13.5px;margin:0 0 16px;}
  .email-cta{text-align:center;margin-bottom:14px;}
  .email-footnote{font-size:11px;color:var(--text-muted);border-top:1px solid var(--border);padding-top:10px;margin:0;}
  .historial-list{display:flex;flex-direction:column;gap:10px;}
  .historial-item{display:flex;gap:12px;font-size:13px;align-items:flex-start;}
  .historial-fecha{color:var(--text-muted);white-space:nowrap;min-width:78px;text-align:right;flex:0 0 auto;padding-top:1px;}
  .historial-contenido{flex:1;line-height:1.5;text-align:left;}
  .historial-paginacion{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;font-size:12.5px;color:var(--text-secondary);}

  .toast{position:fixed;bottom:20px;right:20px;background:var(--text);color:#fff;padding:10px 16px;border-radius:var(--radius);font-size:13px;box-shadow:0 6px 18px rgba(0,0,0,.2);z-index:60;}

  /* --- Etapa 1: Login / sesión --- */
  .login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);}
  .login-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;max-width:360px;width:100%;}
  .login-box h1{font-size:17px;margin-bottom:4px;}
  .login-box .brand-sub{display:block;margin-bottom:20px;}
  .login-box .field{margin-bottom:14px;}
  .login-box .btn-primary{width:100%;}
  .login-status{font-size:12.5px;margin-top:10px;min-height:16px;}
  .login-status.error{color:var(--danger);}
  .login-status.ok{color:var(--st-aprobado-text);}
  .login-step{display:none;}
  .login-step.active{display:block;}
  .session-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:13px;}
  .user-chip{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--text-secondary);}
  .user-chip .rol-tag{font-size:11px;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:#2F3B7A;font-weight:500;}
  .btn-logout{font-size:12px;padding:4px 10px;}
  .app-hidden{display:none !important;}

  @media (prefers-reduced-motion: no-preference){
    .modal-box{animation:pop .15s ease-out;}
  }
  @keyframes pop{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

.brand-logo-fixed {
  position: fixed;
  top: 10px;
  left: 50px;
  height: 32px;
  z-index: 65;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.brand-logo-fixed svg {
  height: 32px;
  width: auto;
  display: block;
}
.btn-hamburger {
  position: fixed;
  top: 8px;
  left: 218px;
  z-index: 60;
  border: none;
  background: #748C22;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  transition: left 0.18s ease, background 0.15s ease;
}
.btn-hamburger:hover {
  background: #647a1d;
}
/* El logo (arriba) queda SIEMPRE en la misma posición fija — no tiene
   transición ni cambia con el estado del sidebar. Solo el botón hamburguesa
   se mueve entre estas dos posiciones, cuidando de nunca encimarse con el
   logo (que ahora ocupa aprox. de 30px a 124px de ancho). */
#appRoot.sidebar-collapsed .btn-hamburger {
  left: 148px;
}
#appRoot {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.app-shell {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
.sidebar {
  width: 200px;
  flex-shrink: 0;
  background: #414644;
  border-right: 1px solid #2b302e;
  display: flex;
  flex-direction: column;
  padding: 12px 8px;
  gap: 4px;
  overflow: hidden;
  position: relative;
  transition: width 0.18s ease, padding 0.18s ease;
}
/* Misma textura de ondas de señal que ya tiene el topbar. */
.sidebar::before, .sidebar::after{
  content:"";position:absolute;border:3px solid rgba(151,183,44,.16);
  border-radius:50%;pointer-events:none;
}
.sidebar::before{width:260px;height:260px;top:-110px;right:-130px;}
.sidebar::after{width:170px;height:170px;top:-30px;right:-75px;}
.sidebar.collapsed {
  width: 0;
  padding: 0;
  border-right: none;
}
.sidebar-link {
  border: none;
  background: transparent;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  text-align: left;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
}
.sidebar-link svg{flex-shrink:0;opacity:.85;}
.sidebar-link.active svg{opacity:1;}
.sidebar-link:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.sidebar-link.active {
  background: var(--apple-green);
  color: var(--gunmetal);
  font-weight: 600;
}
.chev {
  display: inline-block;
  margin-left: auto;
  transition: transform 0.18s ease;
}
.chev.chev-abierto {
  transform: rotate(180deg);
}
.sidebar-sub {
  max-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
  transition: max-height 0.18s ease;
}
.sidebar-sub.abierto {
  max-height: 200px;
}
.sidebar-sublink {
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
  text-align: left;
  white-space: nowrap;
}
.sidebar-sublink:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.sidebar-sublink.active {
  background: var(--apple-green);
  color: var(--gunmetal);
  font-weight: 600;
}
.app-content {
  flex: 1;
  min-width: 0;
}

/* ==== Agregado para el módulo de Contratos (trasplante desde el prototipo) ==== */

/* Variable que faltaba en el :root de Clientes */
:root {
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* Etiquetas globales que Clientes no definía */
th { text-align: left; font-size: 12px; color: var(--text-muted); font-weight: 500; padding: 10px 14px; border-bottom: 1px solid var(--border); }
td { padding: 12px 14px; font-size: 13.5px; border-bottom: 1px solid var(--border); }
label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }

/* ---- clases exclusivas de Contratos ---- */
.combo-opt-empty {padding:8px 10px;font-size:12px;color:var(--text-muted);}
.catalogo-desc {font-size:11.5px;color:var(--text-muted);margin-top:2px;font-weight:400;}
/* El input[type=file] nativo trae su propio botón + texto "ningún archivo
   seleccionado" con un layout distinto al de un input normal — la regla
   general de padding:8px 10px (pensada para texto) lo aprieta y hace que
   el botón y el texto se encimen. Se le da su propio padding más chico. */
input[type="file"] {
  padding: 5px 8px;
  line-height: 1.3;
  font-size: 12.5px;
}
.modulo-nav {display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px;width:fit-content;margin-bottom:22px;}
.modulo-nav button {border:none;background:none;padding:7px 16px;border-radius:999px;font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;font-family:var(--font);}
tr.fila-coincide td {background:var(--accent-soft) !important;}
.info-section-title {font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.info-section-title:first-child {margin-top:0;}
.mono {font-family:var(--font-mono);}
td.mono {font-weight:600;color:var(--gunmetal);font-size:12.5px;}
.folio-title {font-family:var(--font-mono);letter-spacing:.2px;}
.bloque-detalle {border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:14px;background:var(--bg);}
.bloque-detalle-titulo {display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin-bottom:2px;}
.bloque-detalle-num {width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font-size:10.5px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);flex:0 0 auto;}
.bloque-detalle-sub {color:var(--text-muted);font-size:12px;margin:0 0 10px 26px;}
.detailtable-wrap {border:1px solid var(--border);border-radius:8px;overflow-x:auto;background:var(--surface);margin-bottom:8px;}
.detailtable-wrap table {min-width:900px;}
.detailtable-wrap table {margin:0;border:none;border-radius:0;overflow:visible;}
.detailtable-wrap th {background:var(--bg);padding:8px 8px;font-size:11px;}
.detailtable-wrap td {padding:8px 8px;font-size:12.5px;}
/* Fix: en Hardware principal y Hardware secundario, las columnas
   Modalidad (3) y Plazo (4) se recortaban por falta de ancho mínimo.
   Acotado a estos dos bloques porque Complementos usa .detailtable-wrap
   también, pero con columnas distintas en esas posiciones. */
#bloqueDetallePrincipal .detailtable-wrap th:nth-child(3),
#bloqueDetallePrincipal .detailtable-wrap td:nth-child(3),
#bloqueDetalleSecundario .detailtable-wrap th:nth-child(3),
#bloqueDetalleSecundario .detailtable-wrap td:nth-child(3) {
  min-width: 95px;
}
#bloqueDetallePrincipal .detailtable-wrap th:nth-child(4),
#bloqueDetallePrincipal .detailtable-wrap td:nth-child(4),
#bloqueDetalleSecundario .detailtable-wrap th:nth-child(4),
#bloqueDetalleSecundario .detailtable-wrap td:nth-child(4) {
  min-width: 130px;
}
.subtotalbar {display:flex;justify-content:flex-end;gap:16px;padding:8px 12px;font-size:12.5px;color:var(--text-secondary);}
.subtotalbar b {font-family:var(--font-mono);color:var(--text);}
.addrow-btn {width:100%;border:1px dashed var(--border-strong);background:var(--surface);color:var(--text-muted);padding:9px;text-align:center;font-size:12.5px;border-radius:8px;cursor:pointer;}
.addrow-btn:hover {color:var(--accent);border-color:var(--accent);}
.removebtn {background:none;border:none;color:var(--danger);cursor:pointer;font-size:11.5px;padding:2px 4px;}
.modificarbtn {background:none;border:none;color:var(--accent);cursor:pointer;font-size:11.5px;padding:2px 4px;}
/* Discretas a propósito — no son las tarjetas grandes/coloridas del Listado
   de Contratos, solo un dato de referencia rápida arriba de cada tabla. */
.catalogo-mini-stats {display:flex;gap:16px;margin-bottom:10px;font-size:12px;color:var(--text-muted);}
.catalogo-mini-stats b {color:var(--text);font-weight:600;}

.discount-flag {font-size:11px;color:var(--warn-text);margin-top:2px;}
.doclist {display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.docitem {display:flex;align-items:center;gap:10px;padding:7px 10px;background:var(--bg);border:1px solid var(--border);border-radius:8px;font-size:12.5px;}
.doctype-tag {font-size:10.5px;color:var(--text-muted);background:var(--surface);border:1px solid var(--border);padding:1px 8px;border-radius:999px;}
.tinytag {display:inline-block;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:600;}
.tinytag-principal {background:var(--accent-soft);color:#2F3B7A;}
.tinytag-secundario {background:#F1E9FB;color:#6B3FA0;}
.tinytag-adicional {background:var(--st-pendiente-bg);color:var(--warn-text);}
.catgrid {display:grid;grid-template-columns:1.3fr 1fr;gap:18px;align-items:start;}
.card-compact-rediseno{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:12px;}
.card-compact-rediseno:last-child{margin-bottom:0;}
.rediseno-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;}
.rediseno-avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--apple-green-dark);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;flex-shrink:0;}
.rediseno-body{padding:16px 18px;}
.rediseno-grid-destacado{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px 20px;margin-bottom:14px;}
.rediseno-seccion{border-top:1px solid var(--bg);padding-top:14px;}
.rediseno-seccion + .rediseno-seccion{margin-top:14px;}
.rediseno-seccion-titulo{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
.rediseno-grid-discreto{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px 20px;}
.sticky-quick-actions{
  position: sticky;
  top: 56px; /* ajusta este valor si no queda pegado justo debajo del topbar */
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  box-shadow: 0 2px 6px rgba(20,24,35,.06);
}