/* Sistema de Tickets — presentación visual del proyecto "maestros" (SPA con sidebar) */
:root{
  --cyan:#009FE3; --cyan-dk:#0078b8; --cyan-lt:rgba(0,159,227,.08);
  --carbon:#4A4F55; --carbon-d:#3a3e43; --carbon-lt:#5c6168;
  --dark:#2c3137; --body:#2c3137;
  --bg:#f4f6f8; --surface:#fff;
  --border:#e3e8ee; --border-dk:#d0d5dd;
  --muted:#7a828c; --muted-lt:#b3bac3;
  --ok:#027a48; --ok-bg:#ecfdf3; --warn:#b54708; --warn-bg:#fffaeb;
  --amber:#F9AF42; --verde:#027a48; --error:#d64545;
  --r:8px; --r-lg:10px;
  --sh-sm:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --sh:0 4px 8px rgba(16,24,40,.08),0 2px 4px rgba(16,24,40,.05);
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:14px}
body{margin:0;font-family:Calibri,'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--body);line-height:1.5}
a{color:var(--cyan-dk);text-decoration:none}
a:hover{text-decoration:underline}
h1{color:var(--dark);font-size:1.35rem;margin:.2rem 0 1rem;letter-spacing:-.3px}
h2{color:var(--carbon);font-size:.9rem;margin:1.4rem 0 .7rem;text-transform:uppercase;letter-spacing:.6px;font-weight:700;
   display:flex;align-items:center;gap:9px}
h2::before{content:'';width:3px;height:15px;background:var(--cyan);border-radius:2px}
small{color:var(--muted-lt);font-weight:400}

/* Shell SPA: sidebar + topbar + main (estilo maestros) */
#app{display:flex;min-height:100vh}
#sidebar{width:248px;background:var(--carbon);color:#dfe3e8;flex-shrink:0;display:flex;flex-direction:column;
         position:sticky;top:0;height:100vh;overflow-y:auto}
.sb-brand{padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px}
.sb-brand .logo-pill{background:#fff;color:var(--cyan-dk);border-radius:8px;padding:6px 9px;font-weight:800;letter-spacing:1px}
.sb-brand .t{font-weight:700;font-size:.95rem;line-height:1.1}
.sb-brand .s{font-size:.7rem;color:var(--muted-lt)}
.nav-group{padding:14px 18px 5px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:#8b939c;font-weight:700}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 18px;cursor:pointer;border-left:3px solid transparent;
          font-size:.92rem;color:#dfe3e8}
.nav-item:hover{background:rgba(255,255,255,.06);text-decoration:none;color:#fff}
.nav-item.active{background:rgba(0,159,227,.16);border-left-color:var(--cyan);color:#fff;font-weight:600}
.nav-item .ic{font-size:1rem;width:20px;text-align:center}
/* Menús desplegables del sidebar */
.nav-menu{border:none}
.nav-menu summary{list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:space-between;padding-right:14px}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary::after{content:'▸';font-size:.7rem;color:#8b939c;transition:transform .15s}
.nav-menu[open] summary::after{transform:rotate(90deg)}
.nav-menu .nav-item{padding-left:18px}  /* submenús alineados a la izquierda, igual que el resto */
.matriz-aging tbody tr.fila-sel td{background:rgba(0,159,227,.12)!important}
.sb-foot{margin-top:auto;padding:14px 18px;font-size:.72rem;color:#aeb5bd;border-top:1px solid rgba(255,255,255,.08)}
.sb-foot .u{font-weight:700;color:#fff}
.sb-foot .r{color:#8b939c;margin-bottom:6px}
.sb-foot a{color:var(--cyan)}
#wrap{flex:1;min-width:0;display:flex;flex-direction:column}
#topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:11px 24px;display:flex;
        align-items:center;justify-content:space-between;position:sticky;top:0;z-index:30}
#topbar .title{font-size:1.05rem;font-weight:700;color:var(--dark)}
#topbar .bd{font-size:.74rem;color:var(--muted)}
#main{flex:1;min-width:0;padding:22px 24px 60px;max-width:1380px;width:100%}
main.plain{max-width:1000px;margin:1.5rem auto;padding:0 1.5rem}
.btn-link{color:var(--cyan)}
/* Botón hamburguesa (solo móvil) */
#btn-menu{display:none;background:none;border:1px solid var(--border-dk);border-radius:8px;
          font-size:1.15rem;line-height:1;padding:.35rem .6rem;color:var(--carbon);cursor:pointer}

@media(max-width:900px){
  /* Sidebar como panel deslizante: oculto por defecto, se abre con la hamburguesa */
  #btn-menu{display:block}
  #topbar{gap:10px;justify-content:flex-start;padding:10px 14px}
  #topbar .bd{display:none}
  #sidebar{position:fixed;left:-280px;top:0;bottom:0;width:270px;height:100%;z-index:60;
           transition:left .18s ease-out;box-shadow:none}
  body.menu-abierto #sidebar{left:0;box-shadow:0 0 40px rgba(0,0,0,.45)}
  body.menu-abierto::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:50}
  #main{padding:14px 12px 48px}
  /* Tablas anchas: scroll horizontal dentro de la tabla, no en la página */
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .table.wrap-movil{white-space:normal}
  /* Táctil: campos y botones más generosos; 16px evita el auto-zoom de iOS */
  input,select,textarea{font-size:16px}
  .btn{padding:.55rem 1rem}
  .filtros{gap:8px}
  .fg{min-width:calc(50% - 8px)}
}

/* Inicio (bienvenida) */
.bienvenida{display:flex;align-items:center;justify-content:center;min-height:55vh;text-align:center}
.bienvenida h1{font-size:1.8rem;color:var(--carbon)}

/* Flash */
.flash{padding:.6rem .9rem;border-radius:var(--r);margin:.5rem 0;font-size:.9rem}
.flash-ok{background:var(--ok-bg);color:var(--ok);border:1px solid #b8e6c8}
.flash-error{background:#fbe9e5;color:var(--error);border:1px solid #f2c4ba}

/* KPIs / stats */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:1rem 0}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;
      box-shadow:var(--sh-sm);position:relative;overflow:hidden;transition:box-shadow .2s}
.stat:hover{box-shadow:var(--sh)}
.stat::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--cyan);border-radius:var(--r-lg) var(--r-lg) 0 0}
.stat-n{display:block;font-size:1.7rem;font-weight:700;color:var(--dark);line-height:1;letter-spacing:-.5px}
.stat-l{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-top:6px;display:block}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
      padding:1.2rem;margin-bottom:18px}
.hint{color:var(--muted)}

/* Tabla — títulos, contenidos y totales alineados al centro */
.table{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);border:1px solid var(--border);
       border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);font-size:.85rem}
.table thead tr{background:var(--carbon)}
.table th{padding:9px 12px;text-align:center;font-size:.68rem;font-weight:700;color:rgba(255,255,255,.85);
          text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;border-bottom:2px solid var(--cyan)}
.table td{padding:8px 12px;border-top:1px solid var(--border);text-align:center}
.table-1l td{white-space:nowrap}
.table tbody tr:hover td{background:#f0f8ff}
.row-off td{opacity:.55}
.actions{white-space:nowrap;display:flex;gap:.6rem;align-items:center}
.inline{display:inline}
.rol-inline{min-width:140px;padding:.15rem 1.4rem .15rem .4rem;font-size:.8rem;border:1px solid var(--border);border-radius:6px;background:#fff}

/* Tags */
.tag{background:#eef1f4;color:var(--muted);border-radius:10px;padding:.08rem .5rem;font-size:.7rem;margin-right:.2rem}
.tag-ok{background:var(--ok-bg);color:var(--ok)}
.tag-rechazo{background:#fbe4e4;color:#b42318;font-weight:700}
.aviso-rechazo{background:#fdf1f1;border:1px solid #f2c4c0}
.aviso-rechazo h3{color:#b42318}
.rev-acciones{display:flex;gap:.6rem;margin:.3rem 0 .6rem}
.tag-warn{background:var(--warn-bg);color:var(--warn)}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:6px;padding:.5rem .95rem;border-radius:var(--r);
     border:1.5px solid var(--border-dk);background:var(--surface);color:var(--body);font-weight:600;
     cursor:pointer;font-size:.85rem;font-family:inherit;transition:background .15s,border-color .15s,transform .1s}
.btn:hover{text-decoration:none;background:var(--bg);border-color:var(--muted-lt)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--cyan);border-color:var(--cyan);color:#fff}
.btn-primary:hover{background:var(--cyan-dk);border-color:var(--cyan-dk)}
.btn-block{width:100%;justify-content:center}
.page-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem}

/* Formularios */
form.card label,.form-narrow label{display:block;margin:.6rem 0;color:var(--muted);font-weight:700;
     font-size:.68rem;text-transform:uppercase;letter-spacing:.5px}
form input[type=text],form input[type=password],form input[type=email],form input[type=number],
form input[type=date],form select,form textarea{
  width:100%;padding:.5rem .65rem;border:1.5px solid var(--border-dk);border-radius:var(--r);font-size:.9rem;
  margin-top:.3rem;font-family:inherit;color:var(--body);background:var(--surface);outline:none;
  transition:border-color .15s,box-shadow .15s;text-transform:none;letter-spacing:normal;font-weight:400}
form input:focus,form select:focus,form textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,159,227,.12)}
.form-narrow{max-width:440px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.4rem 1rem}
.check{display:flex;align-items:center;gap:.5rem;font-weight:600;text-transform:none;letter-spacing:normal;font-size:.9rem;color:var(--body)}
.check input{width:auto;margin-top:0}
.form-actions{display:flex;gap:.6rem;margin-top:1rem}
/* Botones "Elegir archivos" alineados al margen izquierdo */
form input[type=file]{display:block;margin:.35rem 0 0 0;padding:0;text-align:left;font-size:.9rem}
/* Fieldset transparente: agrupa campos para deshabilitarlos en bloque (ficha solo lectura) */
fieldset.sin-borde{border:none;margin:0;padding:0;min-width:0}

/* Celdas clicables de las matrices de antigüedad */
.celda-n{display:block;color:var(--body);font-variant-numeric:tabular-nums}
.celda-n:hover{color:var(--cyan-dk);text-decoration:none;font-weight:700}

/* Centro Comercial (configuración integral) */
.cc-add{display:flex;gap:.5rem;margin-top:.7rem;flex-wrap:wrap;align-items:center}
.cc-add input[type=text],.cc-add input[type=number],.cc-add select{margin-top:0;width:auto;flex:1;min-width:140px}
.cc-lista{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.3rem}
.cc-off{opacity:.5}

.foto-previa{max-width:280px;border-radius:var(--r);border:1px solid var(--border);margin:.5rem 0}
.previa-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0}
.previa-grid .foto-previa{max-width:130px;max-height:130px;object-fit:cover;margin:0}
.docs-list{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0}
.doc-chip{background:#eef1f4;border:1px solid var(--border);border-radius:6px;padding:.25rem .6rem;font-size:.8rem;color:var(--body);display:inline-flex;align-items:center;gap:.4rem}
.thumb{position:relative;display:inline-block}
.thumb .rm{position:absolute;top:3px;right:3px;background:rgba(0,0,0,.6);color:#fff;border:none;border-radius:50%;width:22px;height:22px;cursor:pointer;font-size:.72rem;line-height:1}
.doc-chip .rm{background:none;border:none;color:var(--error);cursor:pointer;font-size:.85rem;padding:0}
.thumb .rm:hover{background:var(--error)}

/* Filtros (estilo Multifamily) */
.filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:var(--surface);border:1px solid var(--border);
         border-radius:var(--r-lg);padding:14px 18px;margin:.5rem 0 1.2rem;box-shadow:var(--sh-sm)}
.filtros .fg{display:flex;flex-direction:column;min-width:0}
.filtros label{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.filtros input[type=text],.filtros select,.filtros input[type=number]{
  padding:.45rem .6rem;border:1.5px solid var(--border-dk);border-radius:var(--r);font-size:.85rem;background:var(--surface);
  font-family:inherit;color:var(--body);outline:none;transition:border-color .15s,box-shadow .15s}
.filtros input:focus,.filtros select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,159,227,.12)}
.filtros input[type=text]{min-width:210px}

/* Asignación de centros en formulario de usuario */
.centros-check{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.15rem .8rem;
               max-height:220px;overflow-y:auto;border:1.5px solid var(--border-dk);border-radius:var(--r);
               padding:.6rem .8rem;margin:.3rem 0 .6rem;background:var(--surface)}
.centros-check .check{margin:0;font-size:.85rem}

/* Hub de mantenedores */
.mant-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin:1rem 0}
.mant-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;
           box-shadow:var(--sh-sm);transition:box-shadow .2s,border-color .15s;display:block;color:var(--body)}
.mant-card:hover{box-shadow:var(--sh);border-color:var(--cyan);text-decoration:none}
.mc-ic{font-size:1.6rem}
.mc-t{font-weight:700;color:var(--dark);margin-top:.4rem}
.mc-n{font-size:.78rem;color:var(--muted);margin-top:.2rem}
code{background:#eef1f4;padding:.05rem .35rem;border-radius:4px;font-size:.85em}

/* Gráficos de barras */
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin:1rem 0}
.chart{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--sh-sm)}
.chart.wide{margin:1rem 0}
.chart h3{margin:.1rem 0 .9rem;color:var(--dark);font-size:.95rem;font-weight:700}
.bar-row{display:flex;align-items:center;gap:.5rem;margin:.3rem 0;font-size:.84rem}
.bar-label{width:130px;flex:none;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;background:#eef1f4;border-radius:5px;height:16px;overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:5px;min-width:2px}
.bar-n{width:46px;text-align:right;font-weight:700;color:var(--dark);font-variant-numeric:tabular-nums}

/* Tags estado/criticidad */
.st{padding:.12rem .55rem;border-radius:12px;font-size:.72rem;font-weight:700;white-space:nowrap}
.st-creado{background:#eef1f4;color:#5b636d}
.st-ejec{background:var(--warn-bg);color:var(--warn)}
.st-rev{background:#e7f0fb;color:#2b6cb0}
.st-ok{background:var(--ok-bg);color:var(--ok)}
.st-canc{background:#f2f3f4;color:#9aa0a6;text-decoration:line-through}
.cr{padding:.1rem .5rem;border-radius:10px;font-size:.72rem;font-weight:700}
.cr-alto{background:#fbe4df;color:var(--error)}
.cr-medio{background:var(--warn-bg);color:var(--warn)}
.cr-bajo{background:#eef4ec;color:#5f8a68}

/* Tabla clickable + pager + detalle */
.clickable{cursor:pointer}
.desc{color:var(--muted)}
.pager{display:flex;align-items:center;gap:1rem;justify-content:center;margin:1rem 0}
.pager-info{color:var(--muted);font-size:.85rem}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem .8rem;margin:0}
.dl dt{color:var(--muted);font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.4px}
.dl dd{margin:0;font-size:.9rem}
.acciones-flujo{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.acciones-flujo h3{margin:0 .5rem 0 0;font-size:.95rem;color:var(--dark)}
.adjuntos{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
/* Imágenes encuadradas a un marco uniforme 4:3 (referencia: Muestras/Ejemplo_imagen.jpg) */
.adj-foto{width:240px;height:180px;object-fit:cover;border-radius:var(--r);border:1px solid var(--border)}
.adj-file{display:inline-block;padding:.4rem .7rem;background:#eef1f4;border-radius:var(--r)}
/* Archivos no imagen: se muestra el icono del archivo (el nombre queda como tooltip) */
.adj-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;font-size:2.4rem;
          background:#eef1f4;border:1px solid var(--border);border-radius:var(--r)}
.adj-icon:hover{text-decoration:none;border-color:var(--cyan);background:var(--cyan-lt)}
.card h3{color:var(--dark);font-size:.95rem;margin:.1rem 0 .7rem}

/* Subnav preventiva */
.subnav{display:flex;gap:.3rem;border-bottom:2px solid var(--border);margin:.3rem 0 1.2rem}
.subnav a{padding:.5rem .9rem;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;margin-bottom:-2px}
.subnav a:hover{text-decoration:none;color:var(--carbon)}
.subnav a.on{color:var(--cyan-dk);border-bottom-color:var(--cyan)}
.mini-track{display:inline-block;width:70px;height:9px;background:#eef1f4;border-radius:5px;vertical-align:middle;overflow:hidden}
.mini-fill{display:block;height:100%;background:var(--ok)}

/* Calendario */
.cal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem}
.cal-mes{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:.7rem;min-height:90px;box-shadow:var(--sh-sm)}
.cal-mes h3{margin:.1rem 0 .5rem;color:var(--carbon);font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;
            border-bottom:1px solid var(--border);padding-bottom:.35rem}
.cal-item{display:flex;gap:.5rem;align-items:flex-start;padding:.4rem;border-radius:var(--r);margin-bottom:.4rem;
          background:#f7f9fb;border-left:4px solid #ccc}
.cal-pendiente,.cal-prog{border-left-color:var(--muted-lt)}
.cal-proceso{border-left-color:var(--amber);background:var(--warn-bg)}
.cal-atrasada{border-left-color:var(--error);background:#fbe9e5}
.cal-realizada,.cal-ok{border-left-color:var(--ok);background:var(--ok-bg)}
.cal-fecha{font-weight:800;color:var(--carbon);min-width:1.6rem;text-align:center}
.cal-body{display:flex;flex-direction:column;font-size:.8rem;flex:1}
.cal-meta{color:var(--muted);font-size:.72rem}
.cal-vacio{color:#c8ced4;text-align:center;margin:.4rem 0}
.btn-mini{background:var(--ok);color:#fff;border:none;border-radius:6px;width:26px;height:26px;cursor:pointer;font-weight:800}

/* Carta Gantt */
.gantt-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.gantt{border-collapse:collapse;width:100%;background:var(--surface);font-size:.82rem;min-width:820px}
.gantt th,.gantt td{border:1px solid var(--border);padding:.4rem .5rem}
.gantt thead th{background:var(--carbon);color:#fff;position:sticky;top:0;font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;
                border-bottom:2px solid var(--cyan)}
.gantt .g-fix{text-align:left;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.gantt .g-mes{width:38px;text-align:center;background:var(--carbon-lt)}
.g-cell{text-align:center;font-weight:700;color:#fff}
.g-cell a{text-decoration:none}
.g-prog{background:#9db8cc}
.g-proceso{background:#f0a93e}
.g-ok{background:#4bbf7b}
.g-atrasada{background:#e06a4f}

/* Leyenda */
.leyenda{display:flex;gap:1rem;margin:1rem 0;flex-wrap:wrap}
.lg{font-size:.75rem;padding:.2rem .6rem;border-radius:10px}
.lg-pendiente{background:#dcebf6;color:#2b6cb0}
.lg-proceso{background:var(--warn-bg);color:var(--warn)}
.lg-atrasada{background:#fbe4df;color:var(--error)}
.lg-realizada{background:var(--ok-bg);color:var(--ok)}

/* Login */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;
            background:linear-gradient(135deg,var(--carbon),#2c313a)}
.login-card{background:#fff;border-radius:var(--r-lg);padding:2rem;width:340px;box-shadow:0 12px 40px rgba(0,0,0,.3);
            border-top:4px solid var(--cyan)}
.login-brand{text-align:center;margin-bottom:.5rem}
.login-brand .brand-mark{display:inline-block;font-size:1.3rem;background:var(--cyan);color:#fff;
                         font-weight:800;letter-spacing:1px;padding:.3rem .7rem;border-radius:8px}
.login-card h1{text-align:center;font-size:1.2rem;margin:.5rem 0 1.2rem}
.login-card label{display:block;margin:.6rem 0;font-weight:700;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.5px}
.login-card input{width:100%;padding:.55rem .65rem;border:1.5px solid var(--border-dk);border-radius:var(--r);
                  font-size:.95rem;margin-top:.3rem;outline:none}
.login-card input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,159,227,.12)}
.error-card{max-width:460px}

@media(max-width:640px){.detail-grid,.grid-2{grid-template-columns:1fr}.bar-label{width:90px}.topbar{padding:.5rem 1rem}}