/*
 * Don José — formularios de calidad.
 * Estilos propios porque el CSS del panel (Filament) solo trae las clases que
 * él mismo usa: las utilidades de Tailwind escritas a mano en estas vistas no
 * se compilan y la tabla quedaba sin bordes ni tarjetas.
 * Todo va prefijado con `dj-` para no tocar nada del resto del panel.
 */

.dj-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- Tarjetas ---------- */

.dj-card {
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    overflow: hidden;
}

.dj-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
}

.dj-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--gray-950, #0b1220);
}

.dj-card-meta {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--gray-500, #6b7280);
}

.dj-dot {
    color: var(--gray-300, #d1d5db);
}

.dj-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
}

.dj-card-title .dj-mono {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* ---------- Insignias de estado ---------- */

.dj-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
}

.dj-badge--borrador  { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.dj-badge--completo  { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.dj-badge--aprobado  { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.dj-badge--rechazado { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.dj-badge--anulado   { background: var(--gray-100, #f3f4f6); color: var(--gray-500, #6b7280); border-color: var(--gray-200, #e5e7eb); }

/* ---------- Enlace de regreso ---------- */

.dj-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600, #4b5563);
    text-decoration: none;
    white-space: nowrap;
}

.dj-back:hover {
    background: var(--gray-50, #f9fafb);
    border-color: var(--gray-200, #e5e7eb);
    color: var(--gray-950, #0b1220);
}

.dj-back svg {
    width: 16px;
    height: 16px;
}

/* ---------- Barra de semanas ---------- */

.dj-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}

.dj-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dj-tab {
    cursor: pointer;
    padding: 4px 10px;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 8px;
    background: #fff;
    color: var(--gray-700, #374151);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.dj-tab:hover {
    background: var(--gray-50, #f9fafb);
}

.dj-tab.is-active {
    background: var(--primary-600, #b45309);
    border-color: var(--primary-600, #b45309);
    color: #fff;
}

.dj-tab-rango {
    font-weight: 400;
    opacity: .8;
}

.dj-tab-solo {
    padding: 4px 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-600, #4b5563);
}

.dj-progress {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.dj-progress-total {
    color: #4ade80;
    font-weight: 500;
}

/* ---------- Tabla de la matriz ---------- */

.dj-scroll {
    /* El alto tope es lo que hace que el encabezado quede de verdad pegado:
       con un contenedor de la altura del contenido, `sticky` se va con la página. */
    max-height: max(280px, 62vh);
    overflow: auto;
}

.dj-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
}

/* Formato con muchas columnas (R-TZ-01, trece): la tabla no se aprieta, se
   desplaza de lado dentro de .dj-scroll. Así ninguna casilla queda ilegible. */
.dj-table-ancha {
    min-width: 1500px;
}

/* La misma tabla, pero con los anchos del papel: cada columna toma su
   proporción y las casillas se ajustan a ella en vez de pedir 88 px todas.
   El ancho lo manda el <colgroup> (px), así la tabla no se estira sola. */
.dj-table--papel {
    table-layout: fixed;
    min-width: 0;
}

.dj-table--papel th,
.dj-table--papel td {
    box-sizing: border-box;
}

/* Poco relleno lateral: cada píxel que se lleva la celda se lo quita a la
   casilla, y aquí hay trece columnas. */
.dj-table--papel td {
    padding: 3px 4px;
}

.dj-table.dj-table--papel thead th {
    font-size: 10px;
    line-height: 1.25;
    padding: 6px 4px;
    text-align: center;
    /* Un rótulo largo («Lugar de almacenamiento») baja de renglón en vez de
       estirar la columna, y no se corta a media palabra. */
    white-space: normal;
    overflow-wrap: anywhere;
}

.dj-table--papel .dj-input,
.dj-table--papel .dj-select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 0 4px;
    font-size: 11px;
    text-align: left;
}

.dj-table--papel .dj-col-control {
    min-width: 40px;
}

/* ---------- Franja de la cabecera (R-CC-02) ---------- */
/* Bodega · Mes / Año / Hoja n.º · nota del libro, dibujada como el recuadro
   del papel: no se captura, es texto del formato. */
.dj-franja {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #6E6E6E;
    border-bottom: 0;
    font-size: 11px;
    background: #fff;
}

.dj-franja__parte {
    padding: 5px 8px;
    border-right: 1px solid #6E6E6E;
    flex: 1 1 auto;
}

.dj-franja__parte:last-child {
    border-right: 0;
}

.dj-franja__nota {
    font-style: italic;
    color: #333;
}

/* Guiones para escribir a mano (Mes: ___ Año: ___ Hoja n.º ___), iguales a los
   de la hoja impresa. */
.dj-franja .guion {
    display: inline-block;
    border-bottom: 1px solid #333;
    min-width: 90px;
}

.dj-franja .guion.corto {
    min-width: 58px;
}

/* Encabezado de dos niveles (INGRESO / SALIDA) en pantalla. */
.dj-table--papel thead tr.dj-grupo th {
    background: #C9D6EE;
    font-size: 10px;
    letter-spacing: 0.4px;
    padding: 4px;
    border-bottom: 1px solid #6E6E6E;
}

/* ---------- Casilla de fecha ---------- */
.dj-fecha {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
}

.dj-fecha .dj-input {
    flex: 1;
    min-width: 0;
}

.dj-fecha__cal {
    flex: none;
    width: 20px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 6px;
    background: #f9fafb;
    color: #374151;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.dj-fecha__cal:hover {
    background: #f3f4f6;
}

/* El calendario de verdad: invisible, se abre con el botón. */
.dj-fecha__nativo {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.dj-table-ancha .dj-col-control {
    min-width: 42px;
    max-width: 60px;
}

/* En una tabla con muchas columnas la casilla ocupa su celda (los 58 px son
   para las columnas de día de las matrices), si no todo sale recortado. */
.dj-table-ancha .dj-input,
.dj-table-ancha .dj-select {
    width: 100%;
    min-width: 88px;
    text-align: left;
    padding: 0 6px;
}

.dj-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 8px 6px;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    background: var(--gray-50, #f9fafb);
    color: var(--gray-500, #6b7280);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.dj-table thead th.dj-sticky {
    z-index: 30;
}

.dj-table td {
    padding: 5px 10px;
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
    color: var(--gray-700, #374151);
    vertical-align: middle;
}

.dj-col-control {
    min-width: 215px;
    max-width: 300px;
    line-height: 1.35;
}

.dj-col-esperado {
    min-width: 90px;
    color: var(--gray-500, #6b7280);
    white-space: nowrap;
}

/* Columna de solo lectura del papel (Zona, Frecuencia, Proced.): se imprime,
   no se captura. */
.dj-col-fija {
    min-width: 88px;
    max-width: 150px;
    color: var(--gray-600, #4b5563);
    font-size: 11px;
    line-height: 1.3;
}

.dj-col-responsable {
    min-width: 110px;
    color: var(--gray-500, #6b7280);
    white-space: nowrap;
}

.dj-col-dia {
    width: 60px;
    text-align: center;
}

.dj-cell-dia {
    padding: 3px 2px;
    text-align: center;
}

.dj-sticky {
    position: sticky;
    left: 0;
    background: #fff;
}

.dj-table tr.dj-sec td {
    padding: 6px 10px;
    border-bottom: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
}

.dj-table tr.dj-fila:hover td {
    background: #fffdf7;
}

.dj-table tr.dj-fila:hover td.dj-sticky {
    background: #fffdf7;
}

/* Bloques con los anchos del papel (R-BPM-01): la tabla toma las proporciones
   de la hoja y cada casilla ocupa el ancho de su celda, en vez de quedar de
   58 px con un hueco al lado. */
.dj-table.dj-table--hoja { table-layout: fixed; }
.dj-table.dj-table--hoja thead th {
    /* El ancho de la columna incluye su relleno: si no, la tabla se sale. */
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
}
.dj-table.dj-table--hoja td.dj-cell-dia,
.dj-table.dj-table--hoja td.dj-col-control {
    box-sizing: border-box;
}
.dj-table.dj-table--hoja .dj-col-control {
    min-width: 0;
    max-width: none;
    text-align: center;
    padding-left: 4px;
    padding-right: 4px;
}
.dj-table.dj-table--hoja .dj-col-dia { width: auto; }
.dj-table.dj-table--hoja .dj-cell-dia { padding: 3px 4px; }
.dj-table.dj-table--hoja .dj-input {
    width: 100%;
    min-width: 0;
    text-align: left;
    padding: 0 6px;
}
.dj-table.dj-table--hoja .dj-select { width: 100%; }

/* ---------- Casillas ---------- */
.dj-input {
    width: 58px;
    height: 28px;
    padding: 0 2px;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 6px;
    background: #fff;
    color: #111827;
    font-size: 12px;
    text-align: center;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.dj-input:hover {
    border-color: var(--gray-400, #9ca3af);
}

.dj-input:focus {
    outline: none;
    border-color: var(--primary-600, #b45309);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, .18);
}

/* La lista mide lo mismo que una casilla normal para que la tabla quede
   pareja: las columnas de día son de 60 px y una lista más ancha las corre. */
.dj-select {
    width: 58px;
    padding: 0 1px;
    cursor: pointer;
}

/* Casilla de dato numérico: se alinea a la derecha para comparar la columna
   de un vistazo, y usa cifras de ancho fijo para que no baile el texto. */
.dj-input--num {
    text-align: right;
    padding-right: 4px;
    font-variant-numeric: tabular-nums;
}

/* Casilla compuesta «Punto · Hora»: el punto (P1/P2/P3) es un botón que
   cicla y la hora se digita. Cabe en los 58 px de la columna: 19 px el punto
   y el resto la hora. El ancho de la columna NO se toca. */
.dj-hora {
    display: flex;
    align-items: center;
    width: 58px;
    height: 28px;
    margin: 0 auto;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.dj-hora:focus-within {
    border-color: var(--primary-600, #b45309);
    box-shadow: 0 0 0 3px rgba(217, 119, 6, .18);
}

.dj-hora__p {
    flex: 0 0 19px;
    width: 19px;
    height: 100%;
    padding: 0;
    border: 0;
    border-right: 1px solid var(--gray-200, #e5e7eb);
    background: #f9fafb;
    color: var(--primary-700, #92400e);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.dj-hora__p:hover {
    background: #fef3c7;
}

/* Sin hora todavía: el punto se ve tenue para no confundir una casilla vacía
   con una diligenciada. */
.dj-hora--vacia .dj-hora__p {
    color: var(--gray-400, #9ca3af);
    background: #fff;
}

.dj-hora__t {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    padding: 0 1px;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 10px;
    letter-spacing: -.2px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    min-width: 0;
}

.dj-hora__t:focus {
    outline: none;
}

.dj-hora__t::placeholder {
    color: #d1d5db;
    font-size: 9px;
    letter-spacing: -.3px;
}

/* Versión de una sola caja (capturas tipo libro y por campos). */
.dj-hora-rot {
    font-size: 10px;
    letter-spacing: -.2px;
    font-variant-numeric: tabular-nums;
    padding: 0 1px;
    text-align: center;
}

.dj-hora-rot::placeholder {
    color: #d1d5db;
    font-size: 9px;
    letter-spacing: -.3px;
}

/* ---------- Barra de guardado ---------- */

.dj-savebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
}

.dj-note {
    margin: 0;
    font-size: 12px;
    color: var(--gray-500, #6b7280);
}

.dj-note strong {
    color: var(--gray-700, #374151);
    font-weight: 600;
}

/* ---------- Modo oscuro ---------- */

.dark .dj-card {
    background: var(--gray-900, #111827);
    border-color: var(--gray-800, #1f2937);
}

.dark .dj-card-title {
    color: #f9fafb;
}

.dark .dj-toolbar {
    border-color: var(--gray-800, #1f2937);
}

.dark .dj-tab {
    background: transparent;
    border-color: var(--gray-700, #374151);
    color: var(--gray-300, #d1d5db);
}

.dark .dj-back:hover {
    background: var(--gray-800, #1f2937);
    border-color: var(--gray-700, #374151);
    color: #f9fafb;
}

.dark .dj-table thead th {
    background: var(--gray-900, #111827);
    border-color: var(--gray-800, #1f2937);
    color: var(--gray-400, #9ca3af);
}

.dark .dj-table td {
    border-color: var(--gray-800, #1f2937);
    color: var(--gray-300, #d1d5db);
}

.dark .dj-sticky {
    background: var(--gray-900, #111827);
}

.dark .dj-input {
    background: var(--gray-900, #111827);
    border-color: var(--gray-700, #374151);
    color: #f9fafb;
}

.dark .dj-table tr.dj-sec td {
    background: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .25);
    color: #fcd34d;
}

.dark .dj-table tr.dj-fila:hover td,
.dark .dj-table tr.dj-fila:hover td.dj-sticky {
    background: rgba(255, 255, 255, .04);
}

/* ---------- Formatos con varias tablas (R-PSB-03, R-PR-01) ---------- */
.dj-bloque + .dj-bloque { margin-top: 14px; }
.dj-bloque-titulo {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 6px 2px;
    color: rgb(55 65 81);
}
.dark .dj-bloque-titulo { color: rgb(209 213 219); }
/* Fila «Zona»: texto del formato, va pegada al encabezado y no se captura. */
.dj-table thead tr.dj-fila-zona th {
    font-size: 10px;
    font-weight: 500;
    background: rgb(241 245 249);
}
.dark .dj-table thead tr.dj-fila-zona th { background: rgb(30 41 59); }
/* Casillas de tablas sin columna de control (visita del contratista). */
.dj-input--ancho { width: 100%; }

/* Bloque tipo formulario: los campos van en renglones con su rótulo encima
   (parte 3 del R-PSB-03, visita del contratista). */
.dj-lineas {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px;
}
/* Cada renglón es una rejilla: los anchos del papel se reparten solos y no se
   envuelven (con flex, el gap hacía que el último campo se cayera de línea). */
.dj-linea {
    display: grid;
    gap: 8px;
    align-items: end;
}
.dj-campo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

@media (max-width: 700px) {
    .dj-linea { grid-template-columns: 1fr !important; }
}
.dj-campo-label {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    color: rgb(55 65 81);
}
.dark .dj-campo-label { color: rgb(209 213 219); }
/* Calendario del navegador y campos anchos: misma altura que las casillas,
   y el texto a la izquierda (centrado era para las casillas de 58 px). */
.dj-campo .dj-input--ancho {
    height: 28px;
    padding: 0 8px;
    text-align: left;
}
.dj-campo input[type="date"].dj-input {
    font-variant-numeric: tabular-nums;
}
.dark .dj-campo input[type="date"].dj-input { color-scheme: dark; }

/* Bloque tipo rejilla (cabecera del R-BPM-01): el rótulo va al lado de la
   casilla, no encima, para que la pantalla se parezca a la hoja. */
.dj-rejilla {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px;
}
.dj-rejilla-fila {
    display: grid;
    gap: 6px;
    /* Como la tabla del papel: todos los rótulos de un renglón tienen el
       mismo alto, se partan o no en dos líneas. */
    align-items: stretch;
}
.dj-rejilla-label {
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: rgb(31 41 55);
    background: rgb(226 232 240);
    border-radius: 4px;
    padding: 4px 6px;
    min-width: 0;
}

.dark .dj-rejilla-label { color: rgb(31 41 55); }
.dj-rejilla .dj-campo { gap: 0; justify-content: center; }

/* La fecha del papel tiene una casilla angosta: se aprieta un poco la letra y
   el relleno para que quepa «11/04/2026» con su calendario. */
.dj-rejilla input[type="date"].dj-input {
    font-size: 12.5px;
    padding: 0 4px;
}

/* Casillas de marcar (Metodología / Evaluación): más de una a la vez. */
.dj-casillas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    padding: 2px 0;
}
.dj-casilla {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: rgb(31 41 55);
    white-space: nowrap;
    cursor: pointer;
}
.dark .dj-casilla { color: rgb(209 213 219); }
.dj-casilla input[type="checkbox"] {
    width: 12px;
    height: 12px;
    margin: 0;
    accent-color: rgb(217 119 6);
}

/* «Otra: ¿cuál?»: el papel deja ahí un espacio en blanco largo para escribir;
   en pantalla la casilla se estira y se queda con todo el sobrante. */
.dj-input--otra {
    height: 26px;
    flex: 1 1 120px;
    min-width: 120px;
    width: auto;
    padding: 0 8px;
    text-align: left;
}

@media (max-width: 700px) {
    .dj-rejilla-fila { grid-template-columns: 1fr !important; }
}