/* =====================================================================
   INGRESO DE DATOS DEL MONITOR
   Formulario donde se cargan a mano las cifras que no vienen de SAP.

   Antes era oscuro fijo. Ahora los colores salen de las fichas de
   base.css, así tiene los dos temas como el resto del sistema.

   Cargar DESPUÉS de base.css.
   ===================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
    padding: 18px;
}

/* ---------------------------------------------------------------------
   ENCABEZADO
   --------------------------------------------------------------------- */
.app-header {
    background: var(--surface);
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--line);
    border-left: 8px solid var(--azul);
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}
.app-header h1 { font-size: 1.4rem; font-weight: 800; color: var(--text); }
.app-header .who { color: var(--text-faint); font-size: .9rem; }
.header-right { display: flex; gap: 10px; align-items: center; }

/* ---------------------------------------------------------------------
   BOTONES
   --------------------------------------------------------------------- */
.btn {
    border: 1px solid var(--line);
    padding: 9px 16px;
    font: inherit;
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: border-color .15s, color .15s, background .15s;
}
.btn-sec { background: var(--surface-3); color: var(--text-dim); }
.btn-sec:hover { border-color: var(--azul); color: var(--azul); }
.btn-pri {
    background: var(--verde);
    border-color: var(--verde);
    color: #07120b;
}
[data-tema="dia"] .btn-pri { background: #007c2d; border-color: #007c2d; color: #fff; }
.btn-pri:hover { filter: brightness(1.1); }
.btn-pri:disabled { opacity: .55; cursor: wait; }

.btn-tema {
    background: var(--surface-3);
    border: 1px solid var(--line);
    color: var(--text-dim);
    padding: 9px 12px;
    font: inherit;
    font-size: .9rem;
    cursor: pointer;
}
.btn-tema:hover { border-color: var(--azul); color: var(--azul); }

/* ---------------------------------------------------------------------
   PESTAÑAS
   --------------------------------------------------------------------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tab {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-dim);
    padding: 9px 18px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    font-size: .9rem;
    transition: background .2s, border-color .2s, color .2s;
}
.tab:hover { border-color: var(--azul); color: var(--azul); }
.tab.active {
    background: var(--azul);
    border-color: var(--azul);
    color: #fff;
}
[data-tema="dia"] .tab.active { background: #005ef9; border-color: #005ef9; }

/* ---------------------------------------------------------------------
   PANEL
   --------------------------------------------------------------------- */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 24px 28px;
}
.panel h2 { font-size: 1.5rem; margin-bottom: 4px; color: var(--text); }
.panel .meta { color: var(--text-faint); font-size: .85rem; margin-bottom: 18px; }

.cab { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.fld { display: flex; flex-direction: column; gap: 5px; }
.fld label {
    color: var(--text-dim);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* ---------------------------------------------------------------------
   CAMPOS
   --------------------------------------------------------------------- */
input,
select {
    background: var(--surface-3);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 9px 12px;
    font-family: inherit;
    font-size: 1rem;
}
input { font-variant-numeric: tabular-nums; }
input:focus,
select:focus { outline: none; border-color: var(--azul); }
input[type=number] { text-align: right; }
/* El calendario nativo tiene que seguir al tema o queda ilegible. */
input[type=date] { cursor: pointer; }
select { cursor: pointer; }
select option { background: var(--surface-3); color: var(--text); }
tbody td select { width: 100%; }

/* ---------------------------------------------------------------------
   TABLA DE LÍNEAS
   --------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
thead th {
    text-align: left;
    color: var(--text-dim);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 8px 10px;
    border-bottom: 2px solid var(--line-strong);
}
tbody td { padding: 6px 8px; color: var(--text); }
tbody td input { width: 100%; }
.col-del { width: 44px; text-align: center; }
.btn-del {
    background: transparent;
    border: none;
    color: var(--rojo);
    cursor: pointer;
    font-size: 1.1rem;
}
[data-tema="dia"] .btn-del { color: #da0000; }
.btn-del:hover { filter: brightness(1.2); }

.actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    flex-wrap: wrap;
    gap: 12px;
}
.nota {
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-dim);
    padding: 9px 13px;
    font-size: .86rem;
    margin-bottom: 16px;
}

/* ---------------------------------------------------------------------
   TOTALES
   --------------------------------------------------------------------- */
td.calc { text-align: right; padding-right: 14px; }
.calcval { color: var(--verde); font-weight: 800; font-variant-numeric: tabular-nums; }
.granbox {
    color: var(--text-dim);
    font-weight: 700;
    font-size: 1.05rem;
    margin-left: auto;
    margin-right: 14px;
}
.granbox span { color: var(--verde); font-variant-numeric: tabular-nums; }
[data-tema="dia"] .calcval,
[data-tema="dia"] .granbox span { color: #007c2d; }

/* ---------------------------------------------------------------------
   AVISOS
   --------------------------------------------------------------------- */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--verde);
    color: #07120b;
    padding: 12px 22px;
    font-weight: 700;
    opacity: 0;
    transition: opacity .3s;
    pointer-events: none;
    z-index: 999;
}
[data-tema="dia"] .toast { background: #007c2d; color: #fff; }
.toast.show { opacity: 1; }
.toast.err { background: var(--rojo); color: #fff; }
[data-tema="dia"] .toast.err { background: #da0000; }

.loading {
    text-align: center;
    color: var(--text-faint);
    padding: 40px;
    font-size: 1.2rem;
}

/* ---------- Carga desde Excel ----------
   Barra sobre la tabla en las áreas que se alimentan de una planilla. El
   archivo solo se lee: las filas se pintan en el formulario y no entran al
   monitor hasta que se aprieta Guardar. */
.xls-caja {
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    margin-bottom: var(--sp-4, 16px);
    background: var(--surface-2, rgba(255,255,255,.02));
}
.xls-titulo {
    font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--text-dim); margin-bottom: 10px;
}
.xls-titulo i { color: var(--verde); margin-right: 6px; }
.xls-campos { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.xls-archivo, .xls-periodo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.xls-archivo span, .xls-periodo span {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-faint);
}
.xls-archivo input[type=file] { font-size: .78rem; max-width: 260px; color: var(--text-dim); }
.xls-periodo select, .xls-periodo input {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line-strong); border-radius: 6px;
    padding: 5px 8px; font-size: .82rem;
}
.xls-periodo input { width: 90px; }
.xls-ayuda { margin-top: 8px; font-size: .72rem; color: var(--text-faint); }
.xls-resultado { margin-top: 8px; font-size: .78rem; color: var(--text-dim); }
.xls-resultado:empty { display: none; }
.xls-resultado.bueno { color: var(--verde); }
.xls-resultado.malo  { color: var(--rojo); }
.xls-resultado.aviso { color: var(--naranjo, #ff7a00); }

/* ---------- Asistente de importación ----------
   Se muestran las primeras filas del Excel tal como vienen, con las columnas
   rotuladas A, B, C…, para reconocer la estructura y marcar qué es cada una. */
.xls-asistente:empty { display: none; }
.xls-asistente { margin-top: 14px; }
.xls-bloque {
    border: 1px solid var(--line-strong); border-radius: 8px;
    padding: 12px; margin-bottom: 12px;
}
.xls-bloque-tit { font-weight: 700; font-size: .85rem; margin-bottom: 8px; }
.xls-tipo {
    font-weight: 400; font-size: .7rem; color: var(--text-faint);
    margin-left: 8px; text-transform: none;
}
.xls-perfil { font-size: .72rem; color: var(--verde); margin-bottom: 8px; }
.xls-campo { display: flex; flex-direction: column; gap: 3px; }
.xls-campo span { font-size: .66rem; text-transform: uppercase; color: var(--text-faint); }
.xls-campo select, .xls-campo input {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line-strong); border-radius: 6px;
    padding: 4px 7px; font-size: .8rem; min-width: 74px;
}
/* La vista previa se desplaza sola: puede tener muchas columnas */
.xls-tabla { margin-top: 10px; overflow-x: auto; }
.xls-tabla table { border-collapse: collapse; font-size: .72rem; width: max-content; }
.xls-tabla th, .xls-tabla td {
    border: 1px solid var(--line); padding: 3px 7px;
    white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis;
}
.xls-tabla th { background: var(--surface-3, rgba(255,255,255,.04)); color: var(--text-faint); }
.xls-nfila { color: var(--text-faint); text-align: right; }
/* Desde esta fila se empiezan a leer los datos */
.xls-primera td { border-top: 2px solid var(--verde); }
.xls-acciones {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.xls-recordar { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--text-dim); }