@font-face {
    font-family: "Cracked Johnnie";
    src: url("../fonts/CRACJ__.TTF") format("truetype");
    font-display: block;
}

:root {
    --fondo: #f5f4f0;
    --superficie: #ffffff;
    --texto: #222;
    --texto-suave: #6b6b6b;
    --borde: #d9d6cf;
    --acento: #7a2e2e;
    --acento-hover: #5e2222;
    --ok-fondo: #e6f2e6;
    --ok-borde: #9cc79c;
    --error-fondo: #fbe9e7;
    --error-borde: #e0a39a;
    --radio: 6px;
    --fuente-ui: "Segoe UI", system-ui, sans-serif;

    /* Hoja impresa */
    --fuente-titulo: "Cracked Johnnie", cursive;
    --fuente-cuerpo: Verdana, Geneva, sans-serif;
    --tam-titulo: 16pt;
    --tam-cuerpo: 10.5pt;
    --ancho-panel: 100mm;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 15px; }

body {
    margin: 0;
    font-family: var(--fuente-ui);
    color: var(--texto);
    background: var(--fondo);
    line-height: 1.45;
}

a { color: var(--acento); }

h1 { font-size: 1.6rem; margin: 0; font-weight: 600; }

code { background: #eee; padding: 0 .25em; border-radius: 3px; }

/* --- Barra superior --- */
.barra {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: .6rem 1.5rem;
    background: var(--acento);
    color: #fff;
}
.barra a { color: #fff; text-decoration: none; }
.barra nav { display: flex; gap: 1.25rem; }
.barra nav a { opacity: .85; }
.barra nav a:hover { opacity: 1; text-decoration: underline; }
.marca { font-family: var(--fuente-titulo); font-size: 1.8rem; line-height: 1; }

.contenido { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }

.encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* --- Avisos --- */
.aviso { padding: .6rem .9rem; border-radius: var(--radio); margin-bottom: 1rem; border: 1px solid; }
.aviso-ok { background: var(--ok-fondo); border-color: var(--ok-borde); }
.aviso-error { background: var(--error-fondo); border-color: var(--error-borde); }
.aviso-error ul { margin: 0; padding-left: 1.2rem; }
.validation-summary-valid { display: none; }
.error { color: #b3261e; font-size: .9rem; }
.nota { color: var(--texto-suave); font-size: .9rem; }

/* --- Botones y controles --- */
.boton {
    display: inline-block;
    padding: .45rem .9rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.boton:hover { border-color: #aaa; }
.boton-primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton-primario:hover { background: var(--acento-hover); border-color: var(--acento-hover); }
.boton-peligro { color: #b3261e; border-color: var(--error-borde); }
.boton-peligro:hover { background: var(--error-fondo); }
.boton-link { border-color: transparent; background: none; color: var(--acento); }
.boton-chico { padding: .15rem .6rem; font-size: .9rem; }

input[type=text], input[type=search], input:not([type]), select, textarea {
    font: inherit;
    padding: .4rem .6rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 2px solid #c99; outline-offset: -1px; }

/* --- Listado --- */
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.filtros input[type=search] { flex: 1 1 280px; }

.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--borde); }
.tabla th, .tabla td { text-align: left; padding: .45rem .75rem; border-bottom: 1px solid #ebe8e1; }
.tabla th { background: #ece9e2; font-weight: 600; font-size: .9rem; }
.tabla tbody tr:hover { background: #faf8f4; }
.tabla a { text-decoration: none; }
.tabla a:hover { text-decoration: underline; }
.tabla .col-fecha { width: 8rem; white-space: nowrap; }
.sin-titulo { font-style: italic; }

/* --- Formulario de edición --- */
.editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: start;
}
.formulario { display: flex; flex-direction: column; gap: 1rem; }
.campo { display: flex; flex-direction: column; gap: .3rem; border: 0; padding: 0; margin: 0; }
.campo[hidden] { display: none; }
.etiqueta { font-weight: 600; padding: 0; }
.etiqueta .nota { font-weight: normal; }
.etiqueta-con-acciones { display: flex; align-items: center; justify-content: space-between; }
.opciones { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.opcion { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.textarea-letra { font-family: Consolas, "Cascadia Mono", monospace; font-size: .95rem; line-height: 1.5; resize: vertical; }
.acciones { display: flex; gap: .5rem; }

.vista-previa { position: sticky; top: 1rem; }
.vista-previa .etiqueta { margin-bottom: .3rem; }
.panel-hoja {
    width: var(--ancho-panel);
    min-height: 120mm;
    max-height: calc(100vh - 5rem);
    overflow: auto;
    padding: 6mm 5mm;
    background: #fff;
    border: 1px solid var(--borde);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}

.fila-campos { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.campo-ancho { flex: 1 1 14rem; }
.formulario-angosto { max-width: 36rem; }

/* --- Pestañas (ciclos) --- */
.pestanias { display: flex; gap: .25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--borde); }
.pestanias a {
    padding: .45rem .9rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--radio) var(--radio) 0 0;
    color: var(--texto);
    text-decoration: none;
    margin-bottom: -1px;
}
.pestanias a.activa { background: var(--superficie); border-color: var(--borde); font-weight: 600; }
.contador { font-size: .8rem; color: var(--texto-suave); font-weight: normal; }

/* --- Salmos e importación --- */
.respuesta { font-weight: 600; font-size: .92rem; }
.sin-corte { white-space: nowrap; }
.aviso-alerta { background: #fff6d6; border-color: #e6cf7a; }
.resumen-importacion { margin-bottom: 1rem; }
.resumen-importacion p { margin: 0 0 .5rem; }
.tabla-importacion td { vertical-align: top; font-size: .92rem; }
.tabla-importacion select { max-width: 15rem; font-size: .9rem; padding: .25rem .4rem; }
.tabla-importacion .fila-dudosa { background: #fff6d6; }
.tabla-importacion .fila-dudosa:hover { background: #fdf0c0; }
.tabla-importacion .fila-salteada { color: var(--texto-suave); text-decoration: line-through; }
.advertencia { font-weight: normal; color: #8a5a00; font-size: .85rem; }
.advertencia::before { content: "⚠ "; }
details summary { cursor: pointer; }
details .panel-hoja { min-height: 0; max-height: none; margin: .5rem 0; font-weight: normal; }

.zona-eliminar { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--borde); }

/* --- Estilo de la hoja (compartido con la impresión) --- */
.titulo-hoja {
    font-family: var(--fuente-titulo);
    font-size: var(--tam-titulo);
    font-weight: normal;
    text-align: center;
    margin: 0 0 .6em;
}
.letra {
    font-family: var(--fuente-cuerpo);
    font-size: var(--tam-cuerpo);
    line-height: 1.3;
    text-align: center;
}
.letra .bloque { margin: 0 0 1em; }
.letra .bloque:last-child { margin-bottom: 0; }
.letra .linea { display: block; }
.letra .destacada { font-weight: bold; }

@media (max-width: 900px) {
    .editor { grid-template-columns: 1fr; }
    .vista-previa { position: static; }
}

/* --- Hoja --- */
.seccion { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.25rem; }
.seccion h2 { font-size: 1.1rem; font-weight: 600; margin: 0 0 .75rem; }
.seccion > .nota { margin: -.25rem 0 .75rem; }
.seccion select { max-width: 100%; }
.grilla-cantos { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 1rem; }
.grilla-lecturas { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 1.25rem; }
.textarea-lectura { font-family: var(--fuente-cuerpo); font-size: .9rem; line-height: 1.45; resize: vertical; }
input[type=date] {
    font: inherit;
    padding: .4rem .6rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
}
.acciones-lecturas { align-items: center; margin-bottom: .5rem; }

/* --- Login --- */
.formulario-login { max-width: 22rem; margin: 3rem auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.5rem; }
input[type=password] {
    font: inherit;
    padding: .4rem .6rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
}
.barra form { margin-left: auto; }
.barra .boton-salir { background: none; border: 1px solid rgba(255, 255, 255, .5); color: #fff; padding: .25rem .75rem; }
.barra .boton-salir:hover { border-color: #fff; }

/* --- Buscador en los desplegables (combo-busqueda.js) --- */
.combo { position: relative; }
.combo-texto { width: 100%; padding-right: 2rem !important; }
.combo-limpiar {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: var(--texto-suave);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.combo-limpiar:hover { color: var(--texto); }
.combo-lista {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    margin: .2rem 0 0;
    padding: .25rem 0;
    max-height: 20rem;
    overflow-y: auto;
    list-style: none;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.combo-grupo { padding: .35rem .75rem .15rem; font-size: .8rem; font-weight: 600; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .03em; }
.combo-opcion { padding: .3rem .75rem; cursor: pointer; }
.combo-opcion[aria-selected=true] { font-weight: 600; }
.combo-opcion.activa, .combo-opcion:hover { background: #f1e6e6; }
.combo-vacio { padding: .3rem .75rem; color: var(--texto-suave); font-style: italic; }