/* ============================================================================
 * ARCHIVO:        assets/css/snippets.css
 * DESCRIPCIÓN:    Estilos de los bloques "snippet" (tarjeta plegable, cita,
 *                 cajas de aviso, resaltado). Aislados del resto de la app.
 *
 *                 IMPORTANTE — SINCRONÍA:
 *                 Este CSS debe ser IDÉNTICO al string CSS_SNIPPETS de
 *                 assets/js/snippets.js. El JS lo inyecta dentro del iframe
 *                 de TinyMCE (para ver los bloques al EDITAR); este archivo
 *                 los pinta en la página, en modo LECTURA y al IMPRIMIR.
 *                 Si cambias uno, copia el cambio al otro.
 *
 * VERSIÓN:        1.3.0  (Fase 9 — snippets)
 * CREADO:         2026-05-31
 * ACTUALIZADO:    2026-05-31 (plegado details funcional en lectura/edición; mover imagen de lado; bordes normal/fino/sin)
 * PROYECTO:       Mi Archivador
 * ============================================================================ */

/* ---- Tarjeta plegable ---- */
.snp-tarjeta { border: 1px solid var(--snp-borde, #e0dccf); border-radius: 10px; margin: 16px 0; background: var(--snp-fondo, #fff); overflow: hidden; }
.snp-tarjeta > .snp-tarjeta-titulo { cursor: pointer; list-style: none; font-weight: 600; font-size: 1.05em; padding: 12px 16px; background: var(--snp-fondo-2, #f6f4ee); border-bottom: 1px solid var(--snp-borde, #e0dccf); display: flex; align-items: center; gap: 8px; }
.snp-tarjeta > .snp-tarjeta-titulo::-webkit-details-marker { display: none; }
.snp-tarjeta > .snp-tarjeta-titulo::before { content: "\25B8"; display: inline-block; width: 18px; text-align: center; flex: 0 0 auto; transition: transform .18s; color: var(--snp-tenue, #8a8678); }
.snp-tarjeta[open] > .snp-tarjeta-titulo::before { transform: rotate(90deg); }
.snp-tarjeta-cuerpo { padding: 16px; }
.snp-tarjeta-fila { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.snp-tarjeta-texto { flex: 1 1 240px; min-width: 200px; }
.snp-tarjeta-media { flex: 0 0 auto; max-width: 45%; }
.snp-tarjeta-media img { display: block; max-width: 100%; height: auto; border-radius: 8px; }
.snp-tarjeta-pie { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--snp-borde, #e0dccf); }
/* Variante: imagen a la izquierda (añade la clase snp-img-izq al <details>) */
.snp-tarjeta.snp-img-izq .snp-tarjeta-fila { flex-direction: row-reverse; }
/* Variantes de borde */
.snp-tarjeta.snp-borde-fino { border-width: 0.5px; }
.snp-tarjeta.snp-borde-fino > .snp-tarjeta-titulo { border-bottom-width: 0.5px; }
.snp-tarjeta.snp-sin-borde { border: none; }
.snp-tarjeta.snp-sin-borde > .snp-tarjeta-titulo { border-bottom: none; }

/* ---- Cita ---- */
.snp-cita { border-left: 4px solid var(--snp-acento, #7c6df5); background: var(--snp-fondo-2, #f6f4ee); padding: 12px 18px; margin: 16px 0; border-radius: 0 8px 8px 0; font-style: italic; }
.snp-cita-autor { display: block; margin-top: 8px; font-style: normal; font-weight: 600; font-size: .9em; color: var(--snp-tenue, #8a8678); }

/* ---- Caja de aviso ---- */
.snp-aviso { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 16px 0; border-radius: 8px; border: 1px solid; }
.snp-aviso-icono { font-size: 1.25em; line-height: 1.2; flex: 0 0 auto; }
.snp-aviso-cuerpo { flex: 1 1 auto; }
.snp-aviso-titulo { display: block; margin-bottom: 2px; }
.snp-aviso p { margin: 0; }
.snp-aviso-info { background: #eef4ff; border-color: #c7d8fe; color: #1e3a8a; }
.snp-aviso-ok { background: #ecfdf3; border-color: #bbf2cf; color: #14633a; }
.snp-aviso-alerta { background: #fff8e6; border-color: #fde9b0; color: #8a5a00; }
.snp-aviso-peligro { background: #fef2f2; border-color: #fecaca; color: #9b1c1c; }

/* ---- Modificador: resaltar bloque ---- */
.snp-resaltado { background: var(--snp-resalte, #fff6cc); border-radius: 4px; padding: 2px 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
/* ---- Imagen subiéndose (feedback temporal; no se serializa) ---- */
img.snp-subiendo { opacity: .45; transition: opacity .15s; }

/* ---- Paneles: 2 columnas redimensionables + 1 a lo ancho ---- */
.snp-paneles { margin: 16px 0; }
.snp-paneles-fila { display: flex; gap: 14px; align-items: stretch; }
.snp-panel { border: 1px solid var(--snp-borde, #e0dccf); border-radius: 10px; padding: 14px; background: var(--snp-fondo, #fff); min-height: 80px; box-sizing: border-box; }
.snp-panel > *:first-child { margin-top: 0; }
.snp-panel > *:last-child { margin-bottom: 0; }
.snp-panel img, .snp-panel video, .snp-panel iframe { max-width: 100%; height: auto; border-radius: 6px; }
/* Columna izquierda: redimensionable arrastrando su borde derecho */
.snp-panel-izq { flex: 0 0 auto; width: 50%; min-width: 120px; max-width: 85%; resize: horizontal; overflow: auto; }
/* Columna derecha: ocupa el resto */
.snp-panel-der { flex: 1 1 0; min-width: 0; }
/* Panel inferior: a todo el ancho */
.snp-panel-ancho { margin-top: 14px; width: 100%; }
@media (max-width: 600px) {
    .snp-paneles-fila { flex-direction: column; }
    .snp-panel-izq { width: auto; resize: none; }
}
/* Variante sin bordes: los paneles se ven como el resto del texto */
.snp-paneles.snp-sin-bordes .snp-panel { border: none; background: transparent; padding: 0; }
.snp-paneles.snp-sin-bordes .snp-panel-der { padding-left: 0; }

/* ============ TEMA OSCURO ============ */
html[data-tema="oscuro"] .snp-tarjeta { background: #1b1e24; border-color: #33373f; }
html[data-tema="oscuro"] .snp-tarjeta > .snp-tarjeta-titulo { background: #22262e; border-bottom-color: #33373f; }
html[data-tema="oscuro"] .snp-tarjeta-pie { border-top-color: #33373f; }
html[data-tema="oscuro"] .snp-cita { background: #22262e; }
html[data-tema="oscuro"] .snp-aviso-info { background: #16233f; border-color: #274876; color: #bcd2ff; }
html[data-tema="oscuro"] .snp-aviso-ok { background: #12301f; border-color: #225c3a; color: #a6e8c1; }
html[data-tema="oscuro"] .snp-aviso-alerta { background: #332a10; border-color: #6b551d; color: #f2d68a; }
html[data-tema="oscuro"] .snp-aviso-peligro { background: #3a1818; border-color: #7a2c2c; color: #f4b4b4; }
html[data-tema="oscuro"] .snp-resaltado { background: #4a4320; }
html[data-tema="oscuro"] .snp-panel { background: #1b1e24; border-color: #33373f; }