/* Japón en Libros — Estilos adicionales */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ========================================
   GRADIENTES PARA EL HEADER
   ========================================
   Descomenta solo UNO de los siguientes bloques:

   1. LINEAL izquierda → derecha (blanco → rojo)
   2. LINEAL arriba → abajo
   3. RADIAL (circular desde el centro)
   4. RADIAL (circular desde la izquierda)
   ======================================== */

/* Header: degradado en escritorio, blanco en móvil */
.header-gradient {
    background: linear-gradient(to right, #ffffff 0%, #fef2f2 30%, #dc2626 100%);
}

@media (max-width: 767px) {
    .header-gradient {
        background: white !important;
    }
    header .text-xl {
        font-size: 1rem !important;
    }
    header img {
        max-height: 100px !important;
    }
}

/* 2. Lineal arriba → abajo */
/*
.header-gradient {
    background: linear-gradient(to bottom, #ffffff 0%, #fef2f2 30%, #dc2626 100%);
}
*/

/* 3. Radial circular (centro) */
/*
.header-gradient {
    background: radial-gradient(circle at center, #ffffff 0%, #fef2f2 40%, #dc2626 100%);
}
*/

/* 4. Radial circular (desde la izquierda) */
/*
.header-gradient {
    background: radial-gradient(circle at left center, #ffffff 0%, #fef2f2 40%, #dc2626 100%);
}
*/

/* ========================================
   TOOLTIP PERSONALIZADO
   ======================================== */
.tooltip-container {
    position: relative;
    display: inline-block;
}
.tooltip-container .tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 220px;
    background-color: #1c1917;
    color: #f5f5f4;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.3;
    padding: 10px 12px;
    border-radius: 8px;
    position: absolute;
    z-index: 10;
    bottom: 130%;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.2s ease, visibility 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    pointer-events: none;
}
.tooltip-container .tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: #1c1917 transparent transparent transparent;
}
.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* ========================================
   ESTILOS DE IMPRESIÓN / PDF
   ======================================== */
@media print {
    nav, .no-print, #lightbox, button, .drop-zone,
    [class*="fixed"], header, .border-dashed, .tooltip-container,
    .existing-image, footer, iframe, .colaborador {
        display: none !important;
    }

    .max-w-5xl { margin: 0 !important; padding: 0 !important; max-width: 100% !important; width: 100% !important; }
    body {
        background: white !important;
        color: black !important;
        font-size: 11pt;
        line-height: 1.3;
        padding: 2cm !important;
    }
    a { color: black !important; text-decoration: none !important; }
    img { box-shadow: none !important; border-radius: 0 !important; }

    /* === 4 CUADRANTES IGUALES ===
       ┌──────────┬──────────┐
       │ Portada  │  Ficha   │
       ├──────────┼──────────┤
       │Contraport│  Lomo    │
       └──────────┴──────────┘
       Cada cuadrante: 50% ancho × 50% alto */
    .md\:grid-cols-2 {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: calc(100vh - 4cm) !important;
        page-break-inside: avoid !important;
    }

    /* 4 CUADRANTES IGUALES 50×50 */
    .md\:grid-cols-2 > div:first-child > div:first-child {
        position: absolute !important; top: 0; left: 0;
        width: calc(50% - 0.4cm); height: calc(50% - 0.4cm);
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        padding: 0.03rem !important;
    }
    .md\:grid-cols-2 > div:first-child > div:first-child img {
        width: 100% !important; height: 100% !important;
        object-fit: cover !important;
    }

    .md\:grid-cols-2 > div:last-child {
        position: absolute !important; top: 0; right: 0;
        width: calc(50% - 0.4cm); height: calc(50% - 0.4cm);
        overflow: hidden !important;
        overflow-wrap: break-word !important;
        padding: 0.5rem 0.5rem 0.03rem 0.3rem !important;
    }

    .grid-cols-2 > div:first-child {
        position: absolute !important; bottom: 0; left: 0;
        width: calc(50% - 0.4cm); height: calc(50% - 0.4cm);
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        padding: 0.03rem !important;
    }
    .grid-cols-2 > div:first-child img {
        width: 100% !important; height: 100% !important;
        object-fit: cover !important;
    }

    .grid-cols-2 > div:last-child {
        position: absolute !important; bottom: 0; right: 0;
        width: calc(50% - 0.4cm); height: calc(50% - 0.4cm);
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        padding: 0.03rem !important;
    }
    .grid-cols-2 > div:last-child img {
        width: 100% !important; height: 100% !important;
        object-fit: cover !important;
    }

    /* === TEXTO COMPACTO === */
    h1 {
        font-size: 14pt !important;
        line-height: 1.1 !important;
    }
    p, .text-stone-500, .text-stone-600,
    .text-stone-700, .text-stone-800,
    .text-stone-400, dl, dd, dt {
        color: black !important;
        font-size: 10pt !important;
    }
    .space-y-3 > * { line-height: 1.2 !important; }
    .leading-relaxed { font-size: 10pt !important; line-height: 1.2 !important; }
    .shadow-md, .shadow-sm, .shadow { box-shadow: none !important; }
    .rounded-xl, .rounded-lg, .rounded { border-radius: 0 !important; }

    /* Etiqueta: Valor en línea */
    .space-y-3 > div { display: block !important; }
    .space-y-3 dt {
        display: inline !important;
    }
    .space-y-3 dt::after {
        content: ":" !important;
    }
    .space-y-3 dd {
        display: inline !important;
        padding-left: 0.3rem !important;
    }

    @page { margin: 0; }
}