/* Custom animations and professional refinements */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-zoom-in {
    animation: zoomIn 0.3s ease-out forwards;
}

/* Glassmorphism effects */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dark .glass {
    background: rgba(17, 22, 33, 0.7);
}

/* Custom scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}

::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Dark mode scrollbar track for main content areas */
.dark ::-webkit-scrollbar-track {
    background: transparent;
}

/* Selection colors */
::selection {
    background: rgba(26, 87, 219, 0.2);
    color: inherit;
}

.dark ::selection {
    background: rgba(26, 87, 219, 0.4);
}

/* ------------------------------------------------------------------
   Focus styles
   Keep an always-visible focus indicator for keyboard users. These use
   `outline` so they never clash with the Tailwind `focus:ring-*`
   box-shadow rings used by inline editors.
   ------------------------------------------------------------------ */
:focus-visible {
    outline: 2px solid #1a57db;
    outline-offset: 1px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #1a57db;
    outline-offset: 1px;
}

/* Dark surfaces need a lighter outline to stay perceptible. */
.dark :focus-visible,
.dark input:focus-visible,
.dark select:focus-visible,
.dark textarea:focus-visible {
    outline-color: #7ba2f7;
}

/* Never show the ring for mouse users who explicitly asked for the
   default behaviour, but always keep it for keyboard navigation. */
@media (prefers-reduced-motion: no-preference) {
    :focus-visible {
        transition: outline-offset 0.1s ease-in;
    }
}

/* ------------------------------------------------------------------
   Inline validation state (toggled by window.validateField in app.js)
   ------------------------------------------------------------------ */
.field-invalid {
    border-color: #fca5a5 !important;
    background-color: #fef2f2 !important;
    outline: 2px solid #ef4444 !important;
    outline-offset: 0;
}

.dark .field-invalid {
    border-color: #b91c1c !important;
    background-color: rgba(127, 29, 29, 0.25) !important;
    outline-color: #ef4444 !important;
}

.field-invalid:focus-visible {
    outline: 2px solid #dc2626 !important;
    outline-offset: 1px;
}

/* ------------------------------------------------------------------
   Print / PDF helpers
   ------------------------------------------------------------------ */

/* `.no-print` elements stay visible on screen and are hidden by the
   `@media print` block at the bottom of this file. */

/* Force a page break before an element (and after it when stacked). */
.page-break {
    break-after: page;
    page-break-after: always;
}

/* Keep an element (and its box) on a single printed page. */
.page-break-inside-avoid,
.avoid-break {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* Screen-only "paper" simulation used by the report previews. */
.pdf-page {
    background: #fff;
    color: #0f172a;
}

.dark .pdf-page {
    background: #0f172a;
    color: #e2e8f0;
}

.pdf-shadow {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Hide scrollbars on horizontal scroll containers while keeping them
   scrollable (keyboard and touch still work). */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

@media print {
    @page {
        size: A4 portrait;
        margin: 12mm 12mm 16mm 12mm;
    }

    /* ── Campos de texto completos ────────────────────────────────────────────
       Los formularios de informe (visita técnica, minuta) crean sus textarea con
       rows="1" y overflow:hidden, y el JS les fija la altura para que entren en
       pantalla. Al imprimir, el navegador respeta esa altura y recorta todo el
       texto que no entra en una línea.

       Estas reglas viven acá, y no en cada plantilla, porque son las mismas para
       todos los informes: tenerlas duplicadas hacía que un arreglo se aplicara a
       un formulario y no al otro, que es exactamente lo que pasó con la minuta. */
    textarea,
    input.ska-input,
    select.ska-select,
    .ska-textarea,
    .ska-rich-text,
    .ska-input,
    .ska-select {
        overflow: visible !important;
        overflow-y: visible !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        resize: none !important;
        white-space: pre-wrap !important;
        field-sizing: content;
    }

    /* El texto se ajusta palabra por palabra. Una palabra se parte sólo si no
       entra de ninguna manera (una URL, un código); nunca una oración. */
    .ska-body,
    .ska-body *,
    .ska-editor-content * {
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: none;
    }

    /* El marcador del editor enriquecido no debe imprimirse. */
    .ska-rich-text:empty::before {
        content: "" !important;
    }

    /* ── Saltos de hoja ──────────────────────────────────────────────────────
       El encabezado de una tabla se repite si la tabla sigue en otra hoja, y las
       filas no se parten. Los títulos no quedan solos al pie. */
    .ska-table thead {
        display: table-header-group;
    }

    .ska-table tfoot {
        display: table-footer-group;
    }

    .ska-table tr,
    .ska-table td,
    .ska-table th,
    .ska-editor-content tr,
    .ska-editor-content td,
    .ska-editor-content th,
    .ska-part-row,
    .ska-agenda-row,
    .ska-obj-item,
    .ska-img-slot {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .ska-section-title,
    .ska-agenda-header,
    .ska-header {
        break-after: avoid;
        page-break-after: avoid;
    }

    .ska-table td,
    .ska-rich-text,
    .ska-textarea {
        orphans: 2;
        widows: 2;
    }

    /* Las tablas y las tarjetas SÍ pueden repartirse entre hojas: forzar que no
       se partan es lo que empujaba bloques enteros a la hoja siguiente dejando
       media página en blanco. */
    .ska-table,
    .ska-card,
    .anexo-block {
        break-inside: auto;
        page-break-inside: auto;
    }

    /* Una foto no debe partirse ni desbordar la hoja. */
    img {
        max-width: 100% !important;
        height: auto !important;
        break-inside: avoid;
    }

    .ska-table th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* The app shell pins height/overflow, which truncates printed pages. */
    html,
    body,
    main {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        max-height: none !important;
    }

    html,
    body {
        max-width: none !important;
        background: #fff !important;
    }

    /* Neutralise the shell chrome. */
    #sidebarNav,
    #sidebar,
    #sidebarOverlay,
    #btnMobileMenu,
    #toastContainer,
    /* Cualquier diálogo queda fuera del papel. Se apunta al rol y no a IDs
       concretos: así un modal nuevo no se imprime por olvido. */
    [role="dialog"],
    .no-print {
        display: none !important;
    }

    .flex,
    .flex-1,
    .h-full,
    .overflow-hidden,
    .overflow-y-auto {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* Report "paper" becomes the real page. */
    .pdf-page {
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        border: none !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: #000 !important;
    }

    .pdf-shadow,
    .glass {
        box-shadow: none !important;
        background: transparent !important;
    }

    .page-break {
        break-after: page;
        page-break-after: always;
    }

    .page-break-inside-avoid,
    .avoid-break {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    table {
        width: 100% !important;
        page-break-inside: auto;
    }

    tr,
    img,
    section {
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-footer-group;
    }

    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        overflow-wrap: break-word !important;
    }
}