/*
 * Lo que en «Lo mío» es papel (6 nov 2026, Sergi: «no puede estar tan feo solo texto»): recibos, resguardos y
 * documentos, con su sello de tinta, como los décimos de la lotería. El papel es el mismo en claro y en oscuro: es
 * un objeto, no interfaz; por eso sus textos llevan su propia tinta.
 */

/* #region El papel */
:root {
    /* El color de la página, visto desde dentro del papel: el de los agujeros y las muescas. */
    --fondo-troquel: var(--rs-superficie-1);
}

/*
 * Dentro del papel, todo con la tinta de un papel claro, también en oscuro: lo que lleve dentro (un botón, «Cómo pagar»,
 * un aviso) se lee sin tener que decírselo a cada cosa.
 */
.papel {
    --tinta: #23201A;
    --tinta-suave: rgb(35 32 26 / 0.68);
    --rs-texto: #23201A;
    --rs-texto-secundario: rgb(35 32 26 / 0.72);
    --rs-texto-tenue: rgb(35 32 26 / 0.58);
    --rs-borde-sutil: rgb(35 32 26 / 0.12);
    --rs-borde: rgb(35 32 26 / 0.2);
    --rs-borde-fuerte: rgb(35 32 26 / 0.32);
    --rs-borde-control: rgb(35 32 26 / 0.28);
    --rs-superficie-1: #FBF8F0;
    --rs-superficie-2: #F3EEE1;
    --rs-control-fondo: #FFFFFF;
    --rs-hover: rgb(35 32 26 / 0.06);
    --rs-exito-texto: #136C40;
    --rs-aviso-texto: #805400;
    --rs-peligro-texto: #A3261B;
    --marca-acento: oklch(from var(--marca-principal) clamp(0.3, l, 0.5) c h);
    position: relative;
    background: #FBF8F0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 10px 22px rgb(0 0 0 / 0.1);
    color: var(--tinta);
}

.papel .boton--fantasma {
    color: var(--tinta);
}

.papel .boton--fantasma:hover {
    background: rgb(35 32 26 / 0.07);
    color: var(--tinta);
}

/* El borde troquelado: una fila de agujeritos, como los de un talonario. */
.papel--troquelado {
    border-radius: 4px;
    padding-left: 30px;
    background:
        radial-gradient(circle at 13px 50%, var(--fondo-troquel) 0 4px, transparent 4.5px) 0 0 / 26px 18px repeat-y,
        #FBF8F0;
}
/* Una hoja: con la esquina de arriba doblada. */
.papel--hoja {
    border-radius: 4px;
}

.papel--hoja::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: linear-gradient(225deg, var(--fondo-troquel) 50%, #DCD3BB 50%);
    box-shadow: -2px 2px 3px rgb(35 32 26 / 0.12);
    pointer-events: none;
}
/* #endregion */

/* #region El sello de tinta: cómo está, un poco torcido */
.sello {
    display: inline-block;
    padding: 2px var(--espacio-2);
    border: 2px solid currentColor;
    border-radius: 5px;
    color: var(--rs-texto-secundario);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(-3deg);
    transform-origin: center;
}

.papel .sello {
    color: #6B675C;
}

.sello--bien,
.papel .sello--bien {
    color: #136C40;
}

.sello--mal,
.papel .sello--mal {
    color: #A3261B;
}

.sello--ojo,
.papel .sello--ojo {
    color: #805400;
}

.sello--azul,
.papel .sello--azul {
    color: #1D4E89;
}

/* Dentro del papel, las etiquetas de siempre también son sellos. */
.papel .etiqueta {
    display: inline-block;
    padding: 2px var(--espacio-2);
    border: 2px solid currentColor;
    border-radius: 5px;
    background: none;
    color: #6B675C;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    line-height: 1.5;
    text-transform: uppercase;
    transform: rotate(-2deg);
}

.papel .etiqueta::before {
    display: none;
}

.papel :is(.etiqueta--exito, .etiqueta-activo) {
    color: #136C40;
}

.papel :is(.etiqueta--peligro, .etiqueta-cancelado) {
    color: #A3261B;
}

.papel :is(.etiqueta--aviso, .etiqueta-borrador) {
    color: #805400;
}

.papel .etiqueta--proceso {
    color: #1D4E89;
}

:root[data-theme="dark"] .sello--bien:not(.papel .sello) {
    color: #5BD08F;
}

:root[data-theme="dark"] .sello--mal:not(.papel .sello) {
    color: #F58A7E;
}

.sello--grande {
    padding: var(--espacio-1) var(--espacio-3);
    border-width: 3px;
    border-radius: 7px;
    font-size: 1rem;
}
/* #endregion */

/* #region La hoja de calendario: un día que hay que tener presente */
.hoja-calendario {
    display: grid;
    flex: none;
    grid-template-rows: auto 1fr;
    width: 6.5rem;
    height: 6.75rem;
    overflow: hidden;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 12px 24px rgb(0 0 0 / 0.14);
    color: #1B1A17;
    text-align: center;
}

.hoja-calendario small {
    padding: 4px 0 3px;
    border-bottom: 2px solid var(--marca-detalle);
    background: var(--marca-boton);
    color: var(--marca-boton-texto, #FFFFFF);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hoja-calendario strong {
    display: grid;
    place-items: center;
    font-family: var(--fuente-display);
    font-size: 3.1rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1;
}
/* #endregion */