/* Averías y Dirección (b776, js/averias.js). Estilo P7: cajas neutras, sin raíles ni pastillas;
   el estado va en el texto. Propiedades lógicas para he/ar. */

.av-root {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 1400px;
}

.av-head { margin: 0; }

/* scroll-margin: con la página bajada, el «?» no deja la ayuda debajo de la barra superior (sticky) */
.av-help { max-width: 72ch; scroll-margin-top: calc(var(--app-topbar-h, 56px) + 0.75rem); }
.av-help p { margin: 0; }
.av-help p + p { margin-block-start: 0.4rem; }
.av-help-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.6rem; }
.av-help:focus { outline: none; }
.av-help:focus-visible { outline: 2px solid var(--app-saez-red); outline-offset: 2px; }

.av-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}
.av-toolbar-end { margin-inline-start: auto; }
.av-toolbar .av-toolbar-end + .app-btn { margin-inline-start: 0; }
.av-toolbar a.app-btn { text-decoration: none; }
/* «Informe PDF» es un botón y «Informe Excel» un enlace: la misma altura */
.av-toolbar .app-btn { box-sizing: border-box; min-height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; }

.av-field-inline {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.av-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--app-text-muted);
}
.av-field-inline .app-select { min-width: 12rem; max-width: 100%; color: var(--app-text); }

.av-body { display: flex; flex-direction: column; gap: 0.75rem; min-height: 4rem; }
.av-body[aria-busy="true"]::before {
    content: '';
    display: block;
    height: 2.5rem;
    border-radius: 6px;
    background: var(--app-card-bg-subtle);
}
.av-month-note, .av-note { margin: 0; }
.av-count { margin: 0; font-size: 0.85rem; color: var(--app-text-muted); font-variant-numeric: tabular-nums; }

.av-table td { vertical-align: top; }
.av-table td:first-child { font-variant-numeric: tabular-nums; }
.av-nowrap { white-space: nowrap; }
/* app.css (.app-table.app-table-text td, white-space: normal) le gana a .av-nowrap en las celdas:
   «開く» se partía en dos líneas en ja */
.app-table.av-table td.av-nowrap { white-space: nowrap; }
.av-sub { display: block; font-size: 0.78rem; color: var(--app-text-muted); }
/* El modelo de la grúa: los cortos («TLS 65B 10T») en una línea aunque «Cambios» se lleve el ancho (min-width);
   los largos de verdad («TLS65.8 (8 t, 45 HP, año 2010, …)», 59 caracteres) en varias líneas. Con nowrap
   ensanchaban la columna y en «Dirección» la tabla se salía de su caja y cortaba «Cambios» */
.app-table.av-casos .av-sub { min-width: 16ch; max-width: 26ch; overflow-wrap: break-word; text-wrap: balance; }
.av-tag { margin-inline-start: 0.4rem; vertical-align: baseline; }
/* [data-theme="dark"] table td (app.css) le ganaba a «.av-row-off td»: en oscuro el retirado no se atenuaba */
.av-table .av-row-off td { color: var(--app-text-muted); }
.av-changes { min-width: 11rem; }
.av-change { display: block; font-size: 0.8rem; }
.av-change + .av-change { margin-block-start: 0.25rem; }

/* «Averías» y «Dirección»: cada caso es un <tbody> con dos filas, los datos y debajo el resumen (o la avería) a todo
   lo ancho (Javier, 29-10). El rayado y el «hover» van por caso: los de .app-table van por fila (tr:nth-child) y
   pintarían solo una de las dos. La tabla va sobre el fondo de la página, no sobre una tarjeta: con los grises de
   tarjeta el «hover» de un caso impar no se veía (1,005:1), así que van velos transparentes, oscuros en claro y
   claros en oscuro (como app.css); transparentes, además, dejan ver la sombra del móvil. */
.app-table.av-casos > tbody > tr:nth-child(n) { background: transparent; }
.app-table.av-casos > tbody:nth-of-type(even) > tr:nth-child(n) { background: rgba(15, 23, 42, 0.03); }
.app-table.av-casos > tbody:hover > tr:nth-child(n) { background: rgba(15, 23, 42, 0.07); }
[data-theme="dark"] .app-table.av-casos > tbody > tr:nth-child(n) { background: transparent; }
[data-theme="dark"] .app-table.av-casos > tbody:nth-of-type(even) > tr:nth-child(n) { background: rgba(255, 255, 255, 0.03); }
[data-theme="dark"] .app-table.av-casos > tbody:hover > tr:nth-child(n) { background: rgba(255, 255, 255, 0.06); }
/* Por la línea base: el día y «Abrir» son botones de 28 px con el texto centrado y, arriba, su texto quedaba 4,6 px
   más bajo que el de las otras celdas */
.app-table.av-casos .av-fila-datos > td { border-bottom: 0; padding-bottom: 0.3rem; vertical-align: baseline; }
/* overflow: visible ya lo pone .app-table-text, pero el sticky de abajo depende de él: con hidden la celda sería el
   contenedor del desplazamiento y el texto se saldría de la vista */
.app-table.av-casos td.av-resumen { padding-top: 0; max-width: none; overflow: visible; }
/* En el móvil, .app-table-text td (min-width 9rem) le ganaba a .av-changes: «Cambios» en 5 líneas alargaba la fila */
.app-table.av-casos td.av-changes { min-width: 11rem; }
/* Pantalla estrecha: la tabla se desplaza de lado y la fila del resumen mide lo que la tabla entera. El texto se queda
   del ancho del envoltorio (cqi) y pegado a su borde, así se lee sin desplazar; en escritorio la tabla cabe entera y
   no cambia nada. 0.8rem es el padding lateral de la celda (.app-table td, app.css). */
.av-casos-wrap { container-type: inline-size; }
.av-casos-wrap .av-resumen-txt {
    position: sticky;
    inset-inline-start: 0.8rem;
    max-inline-size: calc(100cqi - 1.6rem);
}
@media (max-width: 640px) {
    /* La regla móvil de .app-table-wrap (app.css) pinta las tapas de la sombra con el color de tarjeta y reserva hueco
       para una barra vertical. Aquí la tabla va sobre la página (las tapas, de su color) y esa barra no sale nunca:
       en he el hueco dejaba 10 px de tabla sin ver. Las tapas son opacas en los 10 px de la sombra (como
       .qrs-table-wrap): si no, con la tabla al principio quedaba una franja gris en el borde. Y la sombra es lineal: la
       radial solo se veía a media altura de la tabla, y en un mes con muchos casos los de arriba no tenían aviso. */
    .av-casos-wrap {
        scrollbar-gutter: auto;
        background:
            linear-gradient(to right, var(--app-bg) 10px, rgba(0, 0, 0, 0)) left center / 18px 100% no-repeat local,
            linear-gradient(to left, var(--app-bg) 10px, rgba(0, 0, 0, 0)) right center / 18px 100% no-repeat local,
            linear-gradient(to right, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) left center / 10px 100% no-repeat scroll,
            linear-gradient(to left, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) right center / 10px 100% no-repeat scroll;
    }
    /* En oscuro una sombra negra sobre la página (#0f172a) no se veía (1,05:1): hace de sombra un velo claro */
    [data-theme="dark"] .av-casos-wrap {
        background:
            linear-gradient(to right, var(--app-bg) 10px, rgba(0, 0, 0, 0)) left center / 18px 100% no-repeat local,
            linear-gradient(to left, var(--app-bg) 10px, rgba(0, 0, 0, 0)) right center / 18px 100% no-repeat local,
            linear-gradient(to right, rgba(148, 163, 184, 0.22), rgba(148, 163, 184, 0)) left center / 10px 100% no-repeat scroll,
            linear-gradient(to left, rgba(148, 163, 184, 0.22), rgba(148, 163, 184, 0)) right center / 10px 100% no-repeat scroll;
    }
}
/* Japonés: «Cambios» parte las líneas por frases, no dentro de una palabra (Chrome 119+; si no, como antes) */
:lang(ja) .av-change { word-break: auto-phrase; }

/* Ficha de un caso */
.av-back { align-self: flex-start; }
.av-detail-title { margin: 0; overflow-wrap: anywhere; }
.av-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* la primera fila mide lo que el texto completo; el historial va justo debajo (sin el hueco que
       dejaba repartir la altura del formulario entre las dos filas) */
    grid-template-rows: auto 1fr;
    gap: 1rem;
    align-items: start;
}
.av-detail > .av-form { grid-row: span 2; }
.av-detail > .av-block:only-child,
.av-detail > .av-form:first-child { grid-column: 1 / -1; }
.av-block {
    background: var(--app-card-bg);
    border: 1px solid var(--app-border);
    border-radius: 6px;
    padding: 0.9rem 1rem;
    min-width: 0;
}
.av-block-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--app-text-strong);
    margin: 0 0 0.6rem;
}
.av-texto {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
    font-size: 0.9rem;
    color: var(--app-text);
    max-height: 32rem;
    overflow-y: auto;
}
.av-hint { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--app-text-muted); }

.av-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 0.9rem;
}
.av-fg { margin-bottom: 0.75rem; min-width: 0; }
.av-fg-wide { grid-column: 1 / -1; }
.av-form .app-form-group input,
.av-form .app-form-group select,
.av-form .app-form-group textarea {
    background: var(--app-card-bg);
    color: var(--app-text);
}
.av-check {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 0.85rem;
    margin: 0.25rem 0 0.9rem;
    cursor: pointer;
}
.av-check input { margin-block-start: 0.2rem; }
.av-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.av-msg { margin: 0.75rem 0 0; }
.av-msg:empty { display: none; }

.av-history { margin: 0; padding-inline-start: 1.1rem; font-size: 0.85rem; }
.av-history li + li { margin-block-start: 0.3rem; }
/* Lo que había y, debajo, «→ lo que quedó»: cada valor en su línea, sin mezclarse en el móvil ni en RTL */
.av-values { display: flex; flex-direction: column; gap: 0.15rem; color: var(--app-text-muted); overflow-wrap: anywhere; }
.av-new-line { display: flex; gap: 0.35rem; align-items: baseline; min-width: 0; }
.av-new-line .av-new { min-width: 0; }
.av-old { text-decoration: line-through; text-decoration-thickness: 1px; }
.av-old.av-empty { text-decoration: none; }
/* «←» de «Volver» y «→» del historial: en he/ar apuntan al otro lado */
.av-arrow { display: inline-block; }
[dir="rtl"] .av-arrow { transform: scaleX(-1); }

@media (max-width: 900px) {
    .av-detail { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .av-detail > .av-form { grid-row: auto; }
}
@media (max-width: 600px) {
    .av-fields { grid-template-columns: minmax(0, 1fr); }
    .av-toolbar-end { margin-inline-start: 0; }
    .av-field-inline, .av-field-inline .app-select { width: 100%; min-width: 0; }
}

/* La tabla impresa también: con el plaintext global de app.css ([dir="rtl"] :is(…, td)), en he el resumen a todo lo
   ancho salía pegado a la izquierda, al otro extremo de su caso */
[dir="rtl"] .av-table td, [dir="rtl"] .av-print-table td, [dir="rtl"] .av-change { unicode-bidi: isolate; }

/* Informe para imprimir (PrintView clona .av-print en #print-root) */
.av-print { font-family: Arial, Helvetica, sans-serif; color: #000; font-size: 9pt; }
.av-print h1 { font-size: 14pt; margin: 0 0 4pt; }
.av-print h2 { font-size: 11pt; margin: 10pt 0 4pt; }
.av-print p { margin: 0 0 6pt; }
.av-print-note { font-weight: 700; }
.av-print-table { width: 100%; border-collapse: collapse; }
.av-print-table th, .av-print-table td {
    border: 0.5pt solid #888;
    padding: 3pt 4pt;
    text-align: start;
    vertical-align: top;
}
.av-print-table th { font-weight: 700; }
/* Con el tema oscuro, [data-theme="dark"] table td (app.css) pintaba los bordes en #334155 */
.av-print .av-print-table th, .av-print .av-print-table td { border-color: #888; }
/* Los datos y el resumen de un caso, juntos en la misma hoja y sin raya entre ellos */
.av-print-table tbody, .av-print-table tr { break-inside: avoid; }
.av-print-table .av-fila-datos { break-after: avoid; }
.av-print-table .av-fila-datos > td { border-bottom-style: hidden; padding-bottom: 1pt; }
.av-print-table .av-resumen { padding-top: 0; }
.av-print-table thead { display: table-header-group; }
.av-print .av-sub { display: block; color: #333; font-size: 8pt; min-width: 16ch; max-width: 30ch;
    overflow-wrap: break-word; text-wrap: balance; }   /* como en pantalla: los cortos en una línea */
/* 8pt: la regla de pantalla (0.8rem) las imprimía más grandes que el resto de la tabla */
.av-print .av-change { display: block; font-size: 8pt; }
/* Retirados y pasados a otro mes: con el reset global (* { padding: 0 }) las viñetas colgaban fuera de la caja; en he
   eso corría todo el informe 4 mm a la izquierda (con 1.2em aún sobresalía 0,6 px y Chrome lo reducía al 99,94 %) */
.av-print ul { margin: 0 0 6pt; padding-inline-start: 1.5em; }
/* .av-print p (margin 0 0 6pt) le ganaba al margen del pie, que salía pegado a la lista */
.av-print .av-print-foot { margin-top: 8pt; color: #333; }