/* Pantallas completas en todas las dimensiones */
:root{
    --bg:#f4f6f8;
    --card:#fff;
    --text:#1f2937;
    --muted:#6b7280;
    --line:#cfd6e1;
    --blue:#2563eb;
    --blue2:#1d4ed8;
    --head:#dbeafe;
    --month:#eef2ff;
    --soft:#f8fafc;
    --total:#fef3c7;
    --ok:#dcfce7;
    --danger:#fff1f2;
    --shadow:0 8px 24px rgba(15,23,42,.08);
}

*{box-sizing:border-box}

html,body{
    width:100%;
    min-width:100%;
    min-height:100%;
    margin:0;
    padding:0;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
    overflow-x:hidden;
}

a{color:inherit;text-decoration:none}

.app{
    width:100%;
    min-height:100vh;
    padding:clamp(10px,1.4vw,22px);
}

.page{
    width:100%;
    max-width:none;
    margin:0;
}

.topbar{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    margin-bottom:14px;
}

h1{
    margin:0 0 6px;
    font-size:clamp(22px,2vw,32px);
    letter-spacing:-.03em;
}

.subtitle{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.45;
}

.actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:10px;
    background:var(--card);
    color:inherit;
    font-weight:800;
    font-size:13px;
    cursor:pointer;
    white-space:nowrap;
}

.btn.primary{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
}

.btn:hover{border-color:var(--blue)}
.btn.primary:hover{background:var(--blue2)}

.hero,
.sheet-card{
    width:100%;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--shadow);
    overflow:hidden;
}

.hero{
    padding:clamp(16px,2vw,26px);
    margin-bottom:16px;
}

.meta{
    margin-top:14px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.pill{
    display:inline-flex;
    align-items:center;
    border:1px solid var(--line);
    background:#f8fafc;
    border-radius:999px;
    padding:7px 10px;
    font-size:12px;
    font-weight:700;
    color:#374151;
}

.alert{
    padding:14px 16px;
    background:var(--danger);
    color:#9f1239;
    border:1px solid #fecdd3;
    border-radius:14px;
    margin-bottom:18px;
    line-height:1.45;
}

.success{
    padding:12px 14px;
    background:var(--ok);
    color:#166534;
    border:1px solid #86efac;
    border-radius:14px;
    margin-bottom:14px;
    font-weight:800;
}

.years{
    width:100%;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:14px;
}

.year-card{
    display:block;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    padding:20px;
    color:inherit;
    box-shadow:var(--shadow);
    transition:transform .15s ease,border-color .15s ease;
}

.year-card:hover{
    transform:translateY(-2px);
    border-color:var(--blue);
}

.year-number{
    display:block;
    font-size:34px;
    font-weight:900;
    letter-spacing:-.04em;
    margin-bottom:8px;
}

.year-text{
    display:block;
    color:var(--muted);
    font-size:13px;
    margin-bottom:14px;
}

.open{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--blue);
    color:white;
    border-radius:10px;
    padding:9px 12px;
    font-size:13px;
    font-weight:800;
}

.sheet-header{
    padding:12px 14px;
    background:var(--soft);
    border-bottom:1px solid var(--line);
    display:grid;
    grid-template-columns:minmax(260px,1fr) auto;
    gap:10px;
    align-items:center;
}

.sheet-title{
    font-weight:900;
    font-size:17px;
}

.sheet-info{
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
}

.tabs{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:flex-end;
}

.tab{
    border:1px solid var(--line);
    background:white;
    border-radius:999px;
    padding:7px 10px;
    font-size:12px;
    font-weight:800;
}

.table-shell{
    width:100%;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    max-height:calc(100vh - 235px);
    background:white;
}

table.excel{
    width:max-content;
    min-width:100%;
    border-collapse:collapse;
    table-layout:fixed;
    font-size:13px;
    background:white;
}

.excel th,
.excel td{
    border:1px solid var(--line);
    padding:7px;
    vertical-align:middle;
}

.excel thead th{
    position:sticky;
    top:0;
    z-index:5;
    background:var(--head);
    text-align:center;
    font-size:12px;
    font-weight:900;
}

.month-row td{
    position:sticky;
    left:0;
    z-index:3;
    background:var(--month);
    font-weight:900;
    color:#1e3a8a;
    font-size:14px;
}

.col-mes{width:110px;min-width:110px}
.col-fecha{width:110px;min-width:110px;text-align:center}
.col-fecha-limite{width:120px;min-width:120px;text-align:center;font-weight:800}
.col-estado{width:105px;min-width:105px;text-align:center}
.col-proveedor{width:250px;min-width:250px;font-weight:800}
.col-tipo{width:160px;min-width:160px}
.col-item{width:280px;min-width:280px}
.col-score{width:92px;min-width:92px;text-align:center}
.col-total{width:90px;min-width:90px;text-align:center;background:var(--total);font-weight:900}
.col-cat{width:90px;min-width:90px;text-align:center;background:var(--total);font-weight:900}
.col-eval{width:140px;min-width:140px}
.col-fechaeval{width:125px;min-width:125px}
.col-obs{width:250px;min-width:250px}
.col-importe{width:135px;min-width:135px;text-align:right}

.score{
    width:58px;
    max-width:100%;
    border:1px solid #aeb9c9;
    border-radius:8px;
    padding:6px;
    text-align:center;
    font-weight:800;
}

.select,
.input,
.obs{
    width:100%;
    border:1px solid #aeb9c9;
    border-radius:8px;
    padding:7px;
    background:white;
    font-family:inherit;
}

.obs{
    min-height:34px;
    resize:vertical;
}

.empty-row td{
    color:#9ca3af;
    background:#fcfcfd;
}

.footer-actions{
    width:100%;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    flex-wrap:wrap;
    padding:12px 14px;
    background:var(--soft);
    border-top:1px solid var(--line);
}

.footer-note{
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
    max-width:900px;
}

@media(max-width:900px){
    .topbar{display:block}
    .actions{justify-content:flex-start;margin-top:12px}
    .sheet-header{display:block}
    .tabs{justify-content:flex-start;margin-top:10px}
    .table-shell{max-height:calc(100vh - 285px)}
}

@media(max-width:560px){
    .app{padding:8px}
    .hero,.sheet-card{border-radius:12px}
    .btn{width:auto;min-height:36px;padding:7px 10px;font-size:12px}
    .actions{gap:6px}
    .table-shell{max-height:calc(100vh - 310px)}
}

@media(min-width:1600px){
    table.excel{font-size:14px}
    .excel th,.excel td{padding:8px}
}

@media print{
    body{background:white;overflow:visible}
    .app{padding:0}
    .actions,.tabs,.footer-actions .btn{display:none!important}
    .hero{display:none}
    .sheet-card{border-radius:0;box-shadow:none;border:0}
    .table-shell{overflow:visible;max-height:none}
    table.excel{width:100%;min-width:0;font-size:8px}
    .excel th,.excel td{padding:3px}
    .score,.select,.input,.obs{border:0;padding:1px;font-size:8px}
}


/* Semaforo de plazo de evaluación: fecha_pago + 5 días inclusive */
tr.en-plazo td {
    background-color: #ecfdf5;
}

tr.vencido td {
    background-color: #fef2f2;
}

tr.en-plazo td.col-total,
tr.en-plazo td.col-cat {
    background-color: #dcfce7;
}

tr.vencido td.col-total,
tr.vencido td.col-cat {
    background-color: #fee2e2;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.badge.en-plazo {
    background: #16a34a;
    color: #fff;
}

.badge.vencido {
    background: #dc2626;
    color: #fff;
}

.fecha-evaluacion {
    font-weight: 800;
}

tr.en-plazo .fecha-evaluacion {
    border-color: #16a34a;
    background: #f0fdf4;
}

tr.vencido .fecha-evaluacion {
    border-color: #dc2626;
    background: #fff1f2;
}


tr.sin-fecha td {
    background-color: #f8fafc;
}

.badge.sin-fecha {
    background: #64748b;
    color: #fff;
}


/* Estado visual sin texto: la columna ESTADO se pinta como semáforo */
.excel td.col-estado.estado-color {
    color: transparent !important;
    text-align: center !important;
    font-size: 0 !important;
}

.excel td.col-estado.estado-color.en-plazo {
    background: #16a34a !important;
}

.excel td.col-estado.estado-color.vencido {
    background: #dc2626 !important;
}

.excel td.col-estado.estado-color.sin-fecha {
    background: #cbd5e1 !important;
}

.estado-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    vertical-align: middle;
}

/* Si la fila está en plazo/vencida, mantenemos el color suave en la fila,
   pero el semáforo fuerte queda solo en la columna ESTADO. */
tr.en-plazo td:not(.col-estado) {
    background-color: #ecfdf5 !important;
}

tr.vencido td:not(.col-estado) {
    background-color: #fef2f2 !important;
}

tr.en-plazo td.col-total,
tr.en-plazo td.col-cat {
    background-color: #dcfce7 !important;
}

tr.vencido td.col-total,
tr.vencido td.col-cat {
    background-color: #fee2e2 !important;
}


/* ============================================================
   AJUSTE FINAL: sin columna ESTADO.
   El color se aplica a la fila completa según la fecha evaluación.
   Regla:
   - Verde: hoy <= fecha_evaluacion
   - Rojo: hoy > fecha_evaluacion
   ============================================================ */

.col-estado,
.estado-color,
.estado-dot,
.badge {
    display: none !important;
}

tr.en-plazo td {
    background-color: #dcfce7 !important;
}

tr.vencido td {
    background-color: #fee2e2 !important;
}

tr.sin-fecha td {
    background-color: #f8fafc !important;
}

tr.en-plazo td.col-total,
tr.en-plazo td.col-cat {
    background-color: #bbf7d0 !important;
}

tr.vencido td.col-total,
tr.vencido td.col-cat {
    background-color: #fecaca !important;
}

tr.en-plazo input,
tr.en-plazo select,
tr.en-plazo textarea {
    background-color: #f0fdf4 !important;
    border-color: #22c55e !important;
}

tr.vencido input,
tr.vencido select,
tr.vencido textarea {
    background-color: #fff1f2 !important;
    border-color: #ef4444 !important;
}

tr.sin-fecha input,
tr.sin-fecha select,
tr.sin-fecha textarea {
    background-color: #ffffff !important;
}


/* ============================================================
   CORRECCION FINAL COLOR 5 DIAS
   Verde: hoy <= fecha_evaluacion
   Rojo: hoy > fecha_evaluacion
   Este bloque va al final para pisar estilos viejos/cacheados.
   ============================================================ */

table.excel tbody tr.en-plazo > td,
table.excel tbody tr.en-plazo > td:not(.col-total):not(.col-cat) {
    background: #dcfce7 !important;
}

table.excel tbody tr.vencido > td,
table.excel tbody tr.vencido > td:not(.col-total):not(.col-cat) {
    background: #fee2e2 !important;
}

table.excel tbody tr.en-plazo > td.col-total,
table.excel tbody tr.en-plazo > td.col-cat {
    background: #bbf7d0 !important;
}

table.excel tbody tr.vencido > td.col-total,
table.excel tbody tr.vencido > td.col-cat {
    background: #fecaca !important;
}

table.excel tbody tr.en-plazo input,
table.excel tbody tr.en-plazo select,
table.excel tbody tr.en-plazo textarea {
    background: #f0fdf4 !important;
    border-color: #22c55e !important;
}

table.excel tbody tr.vencido input,
table.excel tbody tr.vencido select,
table.excel tbody tr.vencido textarea {
    background: #fff1f2 !important;
    border-color: #ef4444 !important;
}

table.excel tbody tr.month-row > td,
table.excel tbody tr.empty-row > td {
    background: inherit;
}

table.excel tbody tr.month-row > td {
    background: var(--month) !important;
}