/* FirmanDo — identidad visual sobre Tabler 1.4 */

@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-display: swap; src: url('../fonts/inter-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Dancing Script'; font-display: swap; src: url('../fonts/dancing-script-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Great Vibes'; font-display: swap; src: url('../fonts/great-vibes-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-display: swap; src: url('../fonts/caveat-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Satisfy'; font-display: swap; src: url('../fonts/satisfy-latin-400-normal.woff2') format('woff2'); }

/* Colores de marca: Firman (azul tinta) y Do (verde). El verde es el color principal de acción. */
:root, [data-bs-theme=light] {
    --fd-firman: #1E3A5F;
    --fd-do: #16A34A;
    --tblr-primary: #16A34A;
    --tblr-primary-rgb: 22, 163, 74;
    --tblr-primary-darken: #15803D;
    --tblr-primary-text-emphasis: #0F5C2B;
    --tblr-primary-bg-subtle: #DCFCE7;
    --tblr-primary-border-subtle: #86EFAC;
    --tblr-link-color: #1E3A5F;
    --tblr-link-color-rgb: 30, 58, 95;
    --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fd-tinta-negra: #111827;
    --fd-tinta-azul: #1D4ED8;
}
[data-bs-theme=dark] {
    --fd-firman: #8FB3E0;
    --fd-do: #4ADE80;
    --tblr-primary: #22C55E;
    --tblr-primary-rgb: 34, 197, 94;
    --tblr-link-color: #8FB3E0;
    --tblr-link-color-rgb: 143, 179, 224;
}

.logo { font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1; }
.logo-sm { font-size: 1rem; }
.logo-firman { color: var(--fd-firman); }
.logo-do { color: var(--fd-do); }

.texto-firman { color: var(--fd-firman); }
.texto-do { color: var(--fd-do); }

/* Portada */
.portada { padding: 1.5rem 0 2.5rem; }
.portada h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--fd-firman); }
.portada .lead { max-width: 560px; margin-left: auto; margin-right: auto; }
.zona-subida { max-width: 560px; margin: 0 auto; border: 2px dashed var(--tblr-border-color); }

/* Muestras de firma generada (sobre fondo blanco, como el papel) */
.muestra-firma { background: #fff; min-height: 110px; }
.muestra-firma .texto-firma { font-size: 2rem; line-height: 1.2; overflow-wrap: anywhere; }
.tinta-negro .texto-firma { color: var(--fd-tinta-negra); }
.tinta-azul .texto-firma { color: var(--fd-tinta-azul); }
.muestra-firma .text-secondary { color: #6B7280 !important; }
.f-dancing { font-family: 'Dancing Script', cursive; }
.f-greatvibes { font-family: 'Great Vibes', cursive; }
.f-caveat { font-family: 'Caveat', cursive; }
.f-satisfy { font-family: 'Satisfy', cursive; }

/* Requisitos */
.tabla-requisitos td { vertical-align: middle; }
.tabla-requisitos .detalle { overflow-wrap: anywhere; }

/* Subida de PDF */
.zona-soltar {
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    min-height: 220px; padding: 2rem 1rem; cursor: pointer;
    border: 2px dashed var(--tblr-border-color); border-radius: var(--tblr-border-radius-lg);
    background: var(--tblr-bg-surface-secondary); color: var(--tblr-secondary); transition: border-color .15s, background .15s;
}
.zona-soltar:hover, .zona-soltar.arrastrando { border-color: var(--tblr-primary); background: rgba(var(--tblr-primary-rgb), .06); }
.zona-soltar.con-archivo { border-style: solid; border-color: var(--tblr-primary); color: var(--tblr-body-color); }

/* Visor PDF */
.visor-pdf { background: var(--tblr-bg-surface-secondary); }
.pagina-pdf { margin: 0 auto 1.25rem; max-width: 900px; }
.pagina-pdf canvas { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08); border-radius: 2px; }
.pagina-pdf figcaption { text-align: center; font-size: .8rem; color: var(--tblr-secondary); margin-top: .4rem; }

/* Empresas */
.logo-empresa { max-height: 48px; max-width: 200px; }
.logo-empresa-mini { max-height: 28px; max-width: 80px; }

.menu-simulador { min-width: 300px; }
.huella { font-size: .75rem; }
.datagrid-ancho { grid-column: 1 / -1; }

/* Pasos del asistente en móvil: texto más pequeño para que quepan los 5 */
@media (max-width: 575.98px) {
    .steps { font-size: .7rem; }
    .steps .step-item { padding-left: .25rem; padding-right: .25rem; }
}

[x-cloak] { display: none !important; }

/* Firmantes */
.fila-firmante.arrastrando { opacity: .5; }
.asa-arrastre { cursor: grab; color: var(--tblr-secondary); touch-action: none; }
.numero-firmante { color: #fff; font-weight: 600; background-color: var(--tblr-secondary); }
.punto-color { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; flex: none; background: var(--tblr-secondary); }
.texto-mensaje { white-space: pre-line; }

/* Editor de campos */
.editor-miniaturas { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; display: flex; flex-direction: column; gap: .75rem; padding-right: .25rem; }
.miniatura { position: relative; display: block; padding: 0; border: 2px solid transparent; border-radius: 4px; background: none; }
.miniatura canvas { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.miniatura.activa { border-color: var(--tblr-primary); }
.miniatura-num { position: absolute; left: 4px; bottom: 4px; font-size: .7rem; background: rgba(0,0,0,.6); color: #fff; padding: 0 5px; border-radius: 3px; }
.miniatura-campos { position: absolute; right: 4px; top: 4px; font-size: .7rem; background: var(--tblr-primary); color: #fff; padding: 0 5px; border-radius: 8px; }

.editor-documento { background: var(--tblr-bg-surface-secondary); border-radius: var(--tblr-border-radius-lg); padding: 1rem; min-height: 300px; }
.editor-pagina { position: relative; max-width: 900px; margin: 0 auto 1.5rem; }
.editor-pagina canvas { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08); }
.lienzo-pagina { position: relative; }
.capa-campos { position: absolute; inset: 0; }
.editor-pie-pagina { text-align: center; font-size: .8rem; color: var(--tblr-secondary); margin-top: .4rem; height: 1.2rem; }

.campo-editor {
    position: absolute; box-sizing: border-box; touch-action: none; user-select: none; cursor: move;
    border: 2px solid var(--color-campo, #2563EB); border-radius: 3px;
    background: color-mix(in srgb, var(--color-campo, #2563EB) 16%, transparent);
    color: #111827; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.campo-editor.seleccionado { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-campo, #2563EB) 40%, transparent); background: color-mix(in srgb, var(--color-campo, #2563EB) 26%, transparent); z-index: 2; }
.campo-editor:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }
.campo-texto { font-size: clamp(.55rem, 1.2vw, .78rem); line-height: 1.1; text-align: center; padding: 0 3px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campo-quien { display: block; font-size: .85em; opacity: .75; overflow: hidden; text-overflow: ellipsis; }
.campo-editor.pequeno .campo-texto { display: none; }
.campo-marca { position: absolute; top: 0; right: 2px; font-size: .7rem; font-weight: 700; color: var(--color-campo); pointer-events: none; }
.campo-asa { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; background: var(--color-campo, #2563EB); border-top-left-radius: 3px; pointer-events: none; }

.editor-panel { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding-bottom: .25rem; }
.editor-guardar { position: sticky; top: 0; z-index: 3; }
.paleta-campos { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.paleta-campo { justify-content: flex-start; gap: .4rem; font-size: .8rem; padding: .4rem .5rem; white-space: nowrap; overflow: hidden; cursor: grab; }
@media (max-width: 991.98px) {
    .editor-panel { position: static; max-height: none; overflow: visible; }
    .paleta-campos { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Página de firma (pública) ---- */
.pagina-firma .logo-empresa { max-height: 40px; }
.firma-doc { padding-bottom: 5rem; }
.firma-paginas { background: var(--tblr-bg-surface-secondary); border-radius: var(--tblr-border-radius-lg); padding: .75rem; }
.texto-propio { color: #15803D; }
.campo-firma {
    position: absolute; box-sizing: border-box; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: 3px; overflow: hidden; container-type: size; color: #111827;
}
.campo-firma.propio { border: 2px dashed #16A34A; background: rgba(22, 163, 74, .10); cursor: pointer; }
.campo-firma.propio:hover, .campo-firma.resaltado { background: rgba(22, 163, 74, .22); box-shadow: 0 0 0 3px rgba(22, 163, 74, .35); }
.campo-firma.propio.relleno { border-style: solid; border-color: rgba(22, 163, 74, .5); background: transparent; }
.campo-firma.falta { border-color: #DC2626; background: rgba(220, 38, 38, .10); }
.campo-firma:disabled { cursor: default; opacity: 1; }
.campo-firma img { max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.campo-valor { font-size: clamp(6px, 62cqh, 18px); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; font-family: Arial, Helvetica, sans-serif; width: 100%; text-align: left; }
.campo-pista { font-size: clamp(6px, 45cqh, 14px); font-weight: 600; color: #15803D; white-space: nowrap; pointer-events: none; }
.campo-firma.falta .campo-pista { color: #DC2626; }
.casilla-marca { font-size: 80cqh; line-height: 1; color: #111827; }

.boton-siguiente { position: fixed; left: 0; right: 0; bottom: max(1rem, env(safe-area-inset-bottom)); display: flex; justify-content: center; z-index: 1030; pointer-events: none; }
.boton-siguiente .btn { pointer-events: auto; border-radius: 999px; padding-left: 1.5rem; padding-right: 1.5rem; }

.ventana-firma { position: fixed; inset: 0; z-index: 1050; background: rgba(15, 23, 42, .55); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ventana-firma-caja { background: var(--tblr-bg-surface); color: var(--tblr-body-color); border-radius: 12px; width: 100%; max-width: 640px; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.ventana-firma-cabecera, .ventana-firma-pie { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; }
.ventana-firma-cabecera { justify-content: space-between; border-bottom: 1px solid var(--tblr-border-color); }
.ventana-firma-pie { justify-content: flex-end; border-top: 1px solid var(--tblr-border-color); }
.ventana-firma-cuerpo { padding: 1rem; overflow-y: auto; }
@media (max-width: 575.98px) {
    .ventana-firma { padding: 0; align-items: stretch; }
    .ventana-firma-caja { max-width: none; border-radius: 0; height: 100%; }
    .ventana-firma-cuerpo { flex: 1; }
}
.estilos-firma { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.estilo-firma { background: #fff; border: 2px solid var(--tblr-border-color); border-radius: 8px; height: 72px; padding: 0 .5rem; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.estilo-firma span { font-size: 1.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.estilo-firma.activo { border-color: var(--tblr-primary); box-shadow: 0 0 0 3px rgba(var(--tblr-primary-rgb), .2); }
.estilo-firma.tinta-negro span { color: #111827; }
.estilo-firma.tinta-azul span { color: #1D4ED8; }
.lienzo-dibujo { position: relative; background: #fff; border: 2px dashed var(--tblr-border-color); border-radius: 8px; height: 220px; touch-action: none; }
.lienzo-dibujo canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.linea-firma { position: absolute; left: 8%; right: 8%; bottom: 28%; border-bottom: 1px solid #CBD5E1; pointer-events: none; }
@media (orientation: landscape) and (max-height: 500px) { .lienzo-dibujo { height: 55vh; } }
.vista-sello { max-width: 220px; max-height: 160px; background: #fff; border: 1px solid var(--tblr-border-color); border-radius: 6px; padding: 4px; }
.codigo-acceso { letter-spacing: .4em; font-weight: 700; }
.vista-correo { width: 100%; height: 75vh; border: 0; background: #F3F4F6; }
.confirmacion-envio { padding: .75rem 1rem; border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); background: var(--tblr-bg-surface-secondary); text-align: left; }
.logo-acceso { font-size: 2.2rem; }