/* ==========================================================
   UABJO · Sistema de diseño institucional — Validador de Nómina
   ========================================================== */
:root{
  /* Color */
  --uabjo-blue:#173747; --uabjo-blue-ctrl:#24394E; --uabjo-blue-hover:#1D4356;
  --uabjo-gold:#B2A052; --uabjo-gold-2:#C0AD57;
  --uabjo-white:#FFFFFF; --uabjo-bg:#F5F5F3; --uabjo-border:#D1D5D8;
  --uabjo-text:#202428; --uabjo-muted:#61666B;
  /* Estados (derivados, sólo para validación) */
  --uabjo-danger:#A4261B; --uabjo-danger-bg:#FBEAE8;
  --uabjo-gold-tint:#F1EDD6; --uabjo-blue-tint:#E8EDF0;
  /* Tipografía */
  --font:"Segoe UI",Arial,Helvetica,sans-serif; --fs-xs:11px; --fs-sm:12px; --fs-md:14px; --fs-lg:18px;
  /* Espaciado, radios, sombras */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --radius:4px; --radius-lg:6px;
  --shadow:0 1px 3px rgba(23,55,71,.10),0 4px 14px rgba(23,55,71,.06);
  --focus:0 0 0 3px rgba(178,160,82,.55);
}
*{box-sizing:border-box}
body{margin:0;background:var(--uabjo-bg);font-family:var(--font);color:var(--uabjo-text);font-size:var(--fs-sm);line-height:1.4}
:focus-visible{outline:3px solid var(--uabjo-gold);outline-offset:2px}

/* Encabezado */
.app-header{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) var(--sp-5);background:var(--uabjo-blue);border-bottom:5px solid var(--uabjo-gold);color:var(--uabjo-white)}
.brand{background:var(--uabjo-white);border-radius:var(--radius-lg);padding:var(--sp-2) var(--sp-4);flex:none}
.brand img{width:170px;height:auto;display:block}
.header-title{flex:1;text-align:center}
.header-title span{display:block;font-size:var(--fs-md);opacity:.92}
.header-title strong{display:block;font-size:22px;margin-top:var(--sp-1);letter-spacing:.2px}
.quick-upload{display:flex;gap:var(--sp-3);align-items:center;flex:none;background:var(--uabjo-blue-ctrl);border:1px solid var(--uabjo-gold);border-radius:var(--radius);color:var(--uabjo-white);padding:var(--sp-3) var(--sp-4);cursor:pointer}
.quick-upload:hover{background:var(--uabjo-blue-hover)}
.quick-upload small{display:block;opacity:.9;margin-top:2px}
.excel-icon{background:var(--uabjo-white);color:var(--uabjo-blue);font-weight:800;border-radius:var(--radius);padding:6px 8px}

/* Contenedores */
.shell{max-width:1800px;margin:var(--sp-4) auto 0;padding:0 var(--sp-4) var(--sp-5)}
.upload-panel,.data-panel{background:var(--uabjo-white);border:1px solid var(--uabjo-border);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.upload-panel{display:grid;grid-template-columns:340px minmax(320px,1fr) 220px;gap:var(--sp-5);align-items:center;padding:var(--sp-4) var(--sp-5);border-bottom:3px solid var(--uabjo-gold)}
.upload-panel.drag{background:var(--uabjo-gold-tint)}
.file-card{display:flex;align-items:center;gap:var(--sp-4);border:1px solid var(--uabjo-border);border-radius:var(--radius);padding:var(--sp-3) var(--sp-4);background:var(--uabjo-bg)}
.file-card small,.drop-message small{display:block;color:var(--uabjo-muted);margin-top:var(--sp-1)}
.file-icon{font-size:30px}
.drop-message{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);border:1px dashed var(--uabjo-muted);border-radius:var(--radius);min-height:76px;color:var(--uabjo-blue)}
.cloud{font-size:36px;color:var(--uabjo-blue-hover)}
.actions{text-align:right}
input[type=file]{display:none}

/* Botones */
.btn{border:1px solid transparent;border-radius:var(--radius);padding:9px 16px;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.primary,.dark{background:var(--uabjo-blue-ctrl);color:var(--uabjo-white)}
.primary:hover,.dark:hover{background:var(--uabjo-blue-hover)}
.ghost{background:var(--uabjo-white);color:var(--uabjo-blue);border-color:var(--uabjo-border)}
.ghost:hover{background:var(--uabjo-blue-tint);border-color:var(--uabjo-blue-ctrl)}
.ghost.active{background:var(--uabjo-blue-ctrl);color:var(--uabjo-white);border-color:var(--uabjo-blue-ctrl)}
.btn.gold{background:var(--uabjo-gold);color:var(--uabjo-text);border-color:var(--uabjo-gold)}
.btn.gold:hover{background:var(--uabjo-gold-2)}
.insert-btn{background:var(--uabjo-blue-ctrl);color:var(--uabjo-white);margin-left:auto}
.insert-btn:hover{background:var(--uabjo-blue-hover)}

/* Cabecera del panel */
.data-panel{margin-top:var(--sp-4);overflow:hidden}
.panel-head{display:flex;justify-content:space-between;gap:var(--sp-4);align-items:flex-end;padding:var(--sp-4) var(--sp-5) var(--sp-3);flex-wrap:wrap}
.panel-head h1{font-size:var(--fs-lg);margin:0 0 var(--sp-2);color:var(--uabjo-blue)}
.meta-line{display:flex;gap:var(--sp-4);flex-wrap:wrap;color:var(--uabjo-muted)}
.meta-line span+span{border-left:1px solid var(--uabjo-border);padding-left:var(--sp-4)}
.meta-line b{color:var(--uabjo-text)}
.toolbar{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.search{height:38px;min-width:230px;border:1px solid var(--uabjo-border);border-radius:var(--radius);padding:0 var(--sp-3);color:var(--uabjo-text);font:inherit}
.search:focus{outline:none;border-color:var(--uabjo-gold);box-shadow:var(--focus)}
.found-columns{padding:0 var(--sp-5) var(--sp-2);color:var(--uabjo-muted);font-size:var(--fs-xs)}
.found-columns b{color:var(--uabjo-blue)}

.simple-summary{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;padding:var(--sp-3) var(--sp-5);background:var(--uabjo-bg);border-top:1px solid var(--uabjo-border);border-bottom:1px solid var(--uabjo-border);font-size:var(--fs-md)}
.simple-summary span{white-space:nowrap}

/* Ayuda de edición */
.edit-hint{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-2) var(--sp-5);color:var(--uabjo-muted);font-size:var(--fs-xs)}
.edit-hint .legend{display:inline-flex;align-items:center;gap:6px}
.edit-hint .check{margin-left:auto;color:var(--uabjo-text);cursor:pointer}
.sw{display:inline-block;width:12px;height:12px;border-radius:2px;border:1px solid var(--uabjo-border)}
.sw-invalid{background:var(--uabjo-danger-bg);border-color:var(--uabjo-danger)}
.sw-edited{background:var(--uabjo-gold-tint);border-color:var(--uabjo-gold)}
kbd{background:var(--uabjo-white);border:1px solid var(--uabjo-border);border-bottom-width:2px;border-radius:3px;padding:0 5px;font:inherit;color:var(--uabjo-text)}

/* Tablas */
.table-wrap{margin:0 var(--sp-3);border:1px solid var(--uabjo-border);border-radius:var(--radius);overflow:auto;max-height:66vh;background:var(--uabjo-white)}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:1280px;font-size:var(--fs-sm);line-height:1.2}
thead th{position:sticky;top:0;z-index:2;background:var(--uabjo-blue);color:var(--uabjo-white);text-transform:uppercase;font-size:var(--fs-xs);font-weight:700;letter-spacing:.4px;padding:10px 8px;border-right:1px solid rgba(255,255,255,.18);border-bottom:3px solid var(--uabjo-gold);white-space:nowrap;text-align:center}
tbody td{padding:0 8px;border-right:1px solid #E6E8EA;border-bottom:1px solid #E6E8EA;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis;height:34px;vertical-align:middle}
tbody tr:nth-child(even){background:var(--uabjo-bg)}
tbody tr:hover{background:var(--uabjo-blue-tint)}
.row-invalid td:first-child{box-shadow:inset 4px 0 0 var(--uabjo-danger)}
.rownum{width:48px;text-align:center;color:var(--uabjo-muted);background:var(--uabjo-bg);font-variant-numeric:tabular-nums}
.flag{width:32px;text-align:center;color:var(--uabjo-danger);font-weight:900}
.issues{min-width:220px;max-width:280px;color:var(--uabjo-danger);font-weight:700}
.empty{text-align:center;color:var(--uabjo-muted);padding:36px!important}

/* Celdas editables */
td.cell-invalid{background:var(--uabjo-danger-bg)!important;box-shadow:inset 0 -2px 0 var(--uabjo-danger)}
td.cell-edited:not(.cell-invalid){background:var(--uabjo-gold-tint)!important;box-shadow:inset 0 -2px 0 var(--uabjo-gold)}
.cell-input{display:block;width:100%;height:32px;margin:0;padding:0 2px;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--uabjo-text);font:inherit;text-overflow:ellipsis}
.cell-invalid .cell-input{color:var(--uabjo-danger);font-weight:700}
.cell-input.num{text-align:center;min-width:56px}
.cell-input:hover{border-color:var(--uabjo-border);background:var(--uabjo-white)}
.cell-input:focus{outline:none;background:var(--uabjo-white);border-color:var(--uabjo-gold);box-shadow:var(--focus);color:var(--uabjo-text);font-weight:400;text-overflow:clip}
select.cell-input{cursor:pointer;min-width:62px}
td[data-h="PLAZA"] .cell-input{min-width:120px;text-align:center}
td[data-h="NOMBRE"] .cell-input{min-width:260px}
td[data-h="CATEGORIA"] .cell-input{min-width:110px}
td[data-h="STATUS"] .cell-input{min-width:90px}
td[data-h="ADSCRIPCION"] .cell-input{min-width:240px}
td[data-h="OBSERVACIONES"] .cell-input{min-width:260px}
td[data-h="DERECHO"] .cell-input,td[data-h="PRIMA"] .cell-input{text-align:center}

/* Pie de tabla */
.footer-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;padding:var(--sp-3) var(--sp-5) var(--sp-4);color:var(--uabjo-muted)}
.pager{display:flex;align-items:center;gap:var(--sp-3)}
.page-btn{width:32px;height:32px;border:1px solid var(--uabjo-border);border-radius:var(--radius);background:var(--uabjo-white);color:var(--uabjo-blue);cursor:pointer;font-size:16px}
.page-btn:hover{background:var(--uabjo-blue-tint)}
.page-size select{height:34px;border:1px solid var(--uabjo-border);border-radius:var(--radius);color:var(--uabjo-text);font:inherit;background:var(--uabjo-white)}
footer{text-align:center;background:var(--uabjo-blue);color:var(--uabjo-white);padding:var(--sp-5);font-size:var(--fs-sm);border-top:3px solid var(--uabjo-gold)}

/* Reporte de observaciones */
.hidden{display:none!important}
.report-panel{margin:var(--sp-3);border:1px solid var(--uabjo-gold);border-radius:var(--radius-lg);background:var(--uabjo-white);overflow:hidden}
.report-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--uabjo-border);background:var(--uabjo-gold-tint);flex-wrap:wrap}
.report-head h2{margin:0 0 4px;color:var(--uabjo-blue);font-size:var(--fs-md)}
.report-head small{color:var(--uabjo-muted)}
.report-actions{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}
.report-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-3)}
.report-summary{display:flex;flex-direction:column;gap:var(--sp-2)}
.summary-card{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);background:var(--uabjo-bg);border:1px solid var(--uabjo-border);border-left:4px solid var(--uabjo-gold);border-radius:var(--radius);padding:var(--sp-2) var(--sp-3)}
.summary-card span{font-weight:700}
.summary-card b{font-size:var(--fs-lg);color:var(--uabjo-danger)}
.report-table-wrap{border:1px solid var(--uabjo-border);border-radius:var(--radius);background:var(--uabjo-white);overflow:auto;max-height:300px}
#reportTable{min-width:1050px}
#reportTable thead th{background:var(--uabjo-blue-ctrl)}
#reportTable tbody td{padding:0 8px}
.report-issue{color:var(--uabjo-danger);font-weight:700}

@media(max-width:900px){
  .app-header{flex-wrap:wrap;justify-content:center}
  .header-title{order:3;flex-basis:100%}
  .upload-panel{grid-template-columns:1fr}
  .actions{text-align:left}
  .panel-head{display:block}
  .toolbar{margin-top:var(--sp-3)}
  .search{min-width:100%}
  .report-grid{grid-template-columns:1fr}
  .edit-hint .check{margin-left:0}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* ==========================================================
   Capa iOS: tipografía del sistema, tarjetas redondeadas,
   encabezado translúcido, botones tipo píldora, lista agrupada
   ========================================================== */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --uabjo-bg:#F2F2F7; --uabjo-border:#D1D5D8; --hairline:rgba(60,60,67,.18);
  --radius:10px; --radius-lg:16px;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.06);
  --focus:0 0 0 4px rgba(23,55,71,.22);
  --ease:cubic-bezier(.2,.8,.2,1);
}
body{background:var(--uabjo-bg);font-family:var(--font);font-size:13px;-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid rgba(23,55,71,.55);outline-offset:2px}

.app-header{position:sticky;top:0;z-index:20;background:rgba(23,55,71,.88);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--hairline);padding:10px var(--sp-5)}
.app-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--uabjo-gold)}
.brand{border-radius:14px;padding:6px 14px;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.brand img{width:130px}
.header-title span{font-size:12px;letter-spacing:.2px;opacity:.85}
.header-title strong{font-size:19px;font-weight:600;letter-spacing:-.2px;margin-top:2px}
.quick-upload{border:0;border-radius:999px;background:rgba(255,255,255,.16);padding:8px 16px 8px 8px;gap:10px;transition:background .2s var(--ease),transform .2s var(--ease)}
.quick-upload:hover{background:rgba(255,255,255,.26)}
.quick-upload:active{transform:scale(.97)}
.excel-icon{border-radius:999px;padding:6px 9px;font-size:11px}

.upload-panel,.data-panel{border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.upload-panel{border-bottom:0}
@media(min-width:901px){.upload-panel{grid-template-columns:minmax(220px,360px) minmax(0,1fr) auto}}
@media(max-width:900px){.upload-panel{grid-template-columns:1fr}}
.file-card{border:0;background:var(--uabjo-bg);border-radius:14px}
.file-card strong{font-weight:600}
.file-card small:empty{display:none}
.drop-message{border:1.5px dashed rgba(60,60,67,.3);border-radius:14px;min-height:64px}
.drop-message strong{font-weight:500}
.cloud{font-size:28px}

.btn{border-radius:999px;padding:9px 18px;font-weight:600;border:0;transition:background .2s var(--ease),transform .15s var(--ease),opacity .2s}
.btn:active{transform:scale(.96)}
.primary,.dark{background:var(--uabjo-blue-ctrl);color:#fff}
.ghost{background:rgba(23,55,71,.08);color:var(--uabjo-blue);border:0}
.ghost:hover{background:rgba(23,55,71,.15)}
.ghost.active{background:var(--uabjo-blue-ctrl);color:#fff}
.btn.gold{background:rgba(178,160,82,.22);color:#5E5222;border:0}
.btn.gold:hover{background:rgba(178,160,82,.36)}

.panel-head h1{font-size:26px;font-weight:700;letter-spacing:-.4px;margin-bottom:6px}
.meta-line span+span{border-left:0;padding-left:0}
.meta-line span{background:var(--uabjo-bg);border-radius:999px;padding:3px 12px}
.search{border:0;background:rgba(118,118,128,.12);border-radius:10px;height:36px;padding:0 14px;min-width:240px}
.search::placeholder{color:var(--uabjo-muted)}
.search:focus{background:#fff;box-shadow:var(--focus)}
.simple-summary{background:transparent;border:0;padding:var(--sp-2) var(--sp-5) var(--sp-3);gap:var(--sp-4);font-size:13px;color:var(--uabjo-muted)}
.simple-summary b{color:var(--uabjo-text)}

/* Tabla como lista agrupada */
.table-wrap{margin:0 var(--sp-4) var(--sp-2);border:0;border-radius:14px;box-shadow:inset 0 0 0 1px var(--hairline)}
thead th{background:rgba(249,249,251,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--uabjo-muted);font-weight:600;font-size:11px;letter-spacing:.5px;border-right:0;border-bottom:1px solid var(--hairline);padding:12px 8px}
tbody td{border-right:0;border-bottom:1px solid var(--hairline);height:38px}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#fff}
tbody tr:hover{background:rgba(23,55,71,.045)}
.rownum{background:transparent;color:var(--uabjo-muted)}
.row-invalid td:first-child{box-shadow:inset 3px 0 0 var(--uabjo-danger)}
.issues{font-weight:600}
td.cell-invalid{background:rgba(164,38,27,.09)!important;box-shadow:none}
td.cell-edited:not(.cell-invalid){background:rgba(178,160,82,.2)!important;box-shadow:none}
.cell-input{border-radius:8px;height:30px;padding:0 6px}
.cell-input:hover{border-color:transparent;background:rgba(118,118,128,.1)}
.cell-input:focus{background:#fff;border-color:var(--uabjo-blue-ctrl);box-shadow:var(--focus)}
select.cell-input{-webkit-appearance:none;appearance:none;background-image:none;padding:0 6px}

.footer-bar{padding:var(--sp-2) var(--sp-5) var(--sp-4)}
.page-btn{border:0;background:rgba(23,55,71,.08);border-radius:999px;width:34px;height:34px;transition:background .2s}
.page-btn:hover{background:rgba(23,55,71,.16)}
.page-size select{border:0;background:rgba(118,118,128,.12);border-radius:8px;padding:0 8px}
footer{border-top:0;font-size:12px;opacity:1}

.report-panel{border:0;border-radius:14px;box-shadow:inset 0 0 0 1px var(--hairline)}
.report-head{background:var(--uabjo-bg);border-bottom:1px solid var(--hairline)}
.summary-card{border:0;border-left:0;background:var(--uabjo-bg);border-radius:12px}
.report-table-wrap{border:0;border-radius:12px;box-shadow:inset 0 0 0 1px var(--hairline)}
#reportTable thead th{background:rgba(249,249,251,.94);color:var(--uabjo-muted)}
.hidden{display:none!important}


/* Vista compacta */
.brand{background:transparent;box-shadow:none;padding:0}
.brand img{width:76px;height:76px}
.app-header{padding:8px var(--sp-5)}
table{min-width:0;width:100%}
.table-wrap{max-height:70vh}
tbody td{padding:0 4px;max-width:200px}
thead th{padding:10px 4px}
.issues{min-width:170px;max-width:220px;white-space:normal;line-height:1.2;font-size:11px}
.cell-text{display:block;padding:0 6px;overflow:hidden;text-overflow:ellipsis;color:var(--uabjo-text)}
td[data-h="PLAZA"] .cell-text{text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
td[data-h="NOMBRE"]{max-width:230px}
td[data-h="ADSCRIPCION"],td[data-h="OBSERVACIONES"]{max-width:150px}
.cell-input.num{min-width:0;width:48px;text-align:center;padding:0 2px}
select.cell-input{min-width:0;width:54px}
td[data-h="NOMBRE"] .cell-input,td[data-h="PLAZA"] .cell-input{min-width:0}

/* Encabezado ampliado */
.brand img{width:120px;height:120px}
.header-title span{font-size:22px;font-weight:600;color:var(--uabjo-gold-2);opacity:1;letter-spacing:.3px}
.header-title strong{font-size:20px}
@media(max-width:900px){.brand img{width:96px;height:96px}.header-title span{font-size:17px}}

/* Nombre de la universidad ×2 */
.header-title span{font-size:44px;line-height:1.1}
.header-title strong{font-size:22px;margin-top:6px}
@media(max-width:900px){.header-title span{font-size:26px}}

/* Nombre de la universidad al 75% */
.header-title span{font-size:33px}
@media(max-width:900px){.header-title span{font-size:20px}}

/* Pie fijo en la parte inferior */
footer{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px var(--sp-4)}
body{padding-bottom:48px}