/* Appicultor · estilos del panel. Paleta de miel: ámbar oscuro de marca,
   miel clara para lo que llama la atención y fondo de cera. Tipografía muy
   legible (Atkinson Hyperlegible): buena parte de los usuarios pasa de 60 años. */

:root {
    --tinta: #2B2116;
    --tinta-2: #6B5E4F;
    --marca: #8A5A12;
    --marca-oscura: #6E470D;
    --azafran: #E8A628;
    --azafran-suave: #FBF1DC;
    --fondo: #F7F3EA;
    --papel: #FFFFFF;
    --linea: #E3D9C6;
    --linea-2: #ECE4D4;
    --ok: #2F7D4F;
    --ok-suave: #E4F1E8;
    --aviso: #8A5A0B;
    --error: #B83A2E;
    --error-suave: #F8E5E2;
    --info: #1F4E79;
    --info-suave: #E3ECF5;
    --radio: 12px;
    --lateral: #2B2116;
    font-size: 16px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
    color: var(--tinta);
    background: var(--fondo);
    line-height: 1.45;
}
h1, h2, h3, .marca { font-family: 'Bricolage Grotesque', 'Atkinson Hyperlegible', sans-serif; text-wrap: balance; }
h1 { font-size: 1.9rem; margin: 0; }
h2 { font-size: 1.25rem; margin: 0 0 .75rem; }
a { color: var(--marca); }
a:hover { color: var(--tinta); }
:focus-visible { outline: 3px solid var(--azafran); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.suave { color: var(--tinta-2); }
.peq { font-size: .875rem; }

/* ---------- Estructura con barra lateral ---------- */
.app { display: flex; min-height: 100vh; }
/* El lateral se queda quieto aunque la página sea larguísima —la guía mide
   varias pantallas—, así el menú siempre está a mano. Si no cupiera de alto,
   rueda él solo y no la página. */
.lateral {
    width: 250px; flex-shrink: 0; background: var(--lateral); color: #F3ECE0;
    padding: 22px 14px; display: flex; flex-direction: column; gap: 20px;
    position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto;
}
.lateral .marca { font-size: 1.5rem; font-weight: 700; padding: 0 8px; color: #fff; text-decoration: none; }
.lateral .rest {
    background: #3A2D1E; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.lateral .rest strong { font-size: 1rem; }
.lateral .rest span { font-size: .8rem; color: #A9B5AD; }
.lateral .rest a { color: #F2C66B; font-size: .8rem; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral nav a, .lateral nav span {
    color: #F3ECE0; text-decoration: none; padding: 10px 10px; border-radius: 8px; font-size: .95rem;
    display: flex; justify-content: space-between; align-items: center;
}
.lateral nav a:hover { background: #3A2D1E; }
.lateral nav a[aria-current="page"] { background: var(--azafran); color: #141B17; font-weight: 700; }
.lateral nav span { color: #7C8B82; }
.lateral nav span small { font-size: .7rem; border: 1px solid #3A4740; border-radius: 6px; padding: 1px 6px; }
.lateral .pie { margin-top: auto; display: flex; flex-direction: column; gap: 6px; padding: 0 8px; font-size: .85rem; color: #A9B5AD; }
.lateral .pie a, .lateral .pie button { color: #F3ECE0; }
.lateral .pie button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; text-decoration: underline; }

.contenido { flex-grow: 1; min-width: 0; padding: 28px 32px 48px; display: flex; flex-direction: column; gap: 22px; }
.cabecera { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cabecera > div { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; }

/* ---------- Piezas ---------- */
.tarjeta { background: var(--papel); border-radius: var(--radio); padding: 18px 20px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.cifra { display: flex; flex-direction: column; gap: 2px; }
.cifra strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 2rem; line-height: 1.1; }
.cifra span { color: var(--tinta-2); font-size: .9rem; }

.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--tinta);
    background: var(--papel); color: var(--tinta); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.boton:hover { background: var(--fondo); color: var(--tinta); }
.boton.primario { background: var(--marca); border-color: var(--marca); color: #fff; }
.boton.primario:hover { background: var(--marca-oscura); }
.boton.peligro { border-color: var(--error); color: var(--error); }
.boton.peq { min-height: 36px; padding: 0 12px; font-size: .9rem; }
.boton.ancho { width: 100%; }

.tabla-envoltura { background: var(--papel); border-radius: var(--radio); overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-2); padding: 12px 16px; }
.tabla td { padding: 12px 16px; border-top: 1px solid var(--linea-2); vertical-align: middle; }
.tabla tr.apagada td { color: var(--tinta-2); }

.etiqueta { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 10px; background: var(--fondo); color: var(--tinta); white-space: nowrap; }
.etiqueta.titular { background: #1D2B24; color: #fff; }
.etiqueta.encargado, .etiqueta.veterinario { background: var(--info-suave); color: var(--info); }
.etiqueta.baja { background: var(--error-suave); color: var(--error); }
.etiqueta.prueba { background: var(--azafran-suave); color: var(--aviso); }
.etiqueta.activo, .etiqueta.activa { background: var(--ok-suave); color: var(--ok); }

/* ---------- Formularios ---------- */
.form { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .campo legend { font-weight: 700; font-size: .95rem; }
.campo .ayuda { font-size: .85rem; color: var(--tinta-2); }
.campo input[type=text], .campo input[type=email], .campo input[type=password], .campo input[type=number], .campo input[type=date], .campo select, .campo textarea {
    min-height: 44px; border: 1px solid #C9CEC3; border-radius: 10px; padding: 0 12px; font: inherit; background: #fff; color: var(--tinta);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--marca); outline: 2px solid var(--marca); outline-offset: 0; }
fieldset.campo { border: 0; padding: 0; margin: 0; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones label { display: flex; align-items: center; gap: 8px; border: 1px solid var(--linea); border-radius: 10px; padding: 8px 12px; font-weight: 400; cursor: pointer; background: #fff; }
.opciones input { width: 18px; height: 18px; accent-color: var(--marca); margin: 0; }
.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.roles label { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--linea); border-radius: 10px; padding: 12px; cursor: pointer; background: #fff; font-weight: 400; }
.roles label:has(input:checked) { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.roles input { margin-top: 3px; accent-color: var(--marca); }
.roles strong { display: block; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Avisos ---------- */
.aviso { border-radius: 10px; padding: 12px 16px; border: 1px solid; }
.aviso.ok { background: var(--ok-suave); border-color: #B9DAC5; }
.aviso.error { background: var(--error-suave); border-color: #EBC1BB; }
.aviso.warn { background: var(--azafran-suave); border-color: #EFD39A; }
.aviso.info { background: var(--info-suave); border-color: #C3D5E8; }
.clave-provisional { background: var(--papel); border: 2px solid var(--azafran); border-radius: var(--radio); padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.clave-provisional code { font-family: ui-monospace, 'IBM Plex Mono', monospace; font-size: 1.35rem; font-weight: 700; letter-spacing: .06em; background: var(--fondo); padding: 6px 12px; border-radius: 8px; align-self: flex-start; }

/* ---------- Pantallas sin sesión ---------- */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background:
    radial-gradient(1200px 600px at 10% -10%, #DCE7DF 0%, transparent 60%), var(--fondo); }
.acceso .caja { width: 100%; max-width: 420px; background: var(--papel); border-radius: 16px; padding: 30px 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 10px 30px rgba(29,43,36,.08); }
.acceso .marca { font-size: 2rem; font-weight: 700; color: var(--marca); margin: 0; }
.acceso .form { max-width: none; }
.lista-cuentas { display: flex; flex-direction: column; gap: 8px; }
.lista-cuentas button { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 60px; padding: 10px 16px; border: 1px solid var(--linea); border-radius: 12px; background: #fff; font: inherit; cursor: pointer; color: var(--tinta); }
.lista-cuentas button:hover { border-color: var(--marca); }

@media (max-width: 860px) {
    .app { flex-direction: column; }
    /* En el móvil el menú va arriba y en horizontal: aquí no se queda fijo,
       que se comería la pantalla entera. */
    .lateral { width: auto; padding: 14px 16px; gap: 12px;
        position: static; height: auto; overflow: visible; }
    .lateral nav { flex-direction: row; flex-wrap: wrap; }
    .lateral .pie { margin-top: 0; flex-direction: row; flex-wrap: wrap; gap: 14px; }
    .contenido { padding: 20px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden] { display: none !important; }

/* ---------- Sala ---------- */
.zona { display: flex; flex-direction: column; gap: 14px; }
.zona.apagada { opacity: .75; }
.zona-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.zona-cab h2 { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.menu-zona { position: relative; }
.menu-zona summary { list-style: none; }
.menu-zona summary::-webkit-details-marker { display: none; }
.menu-zona-cuerpo { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 24px rgba(29,43,36,.12); min-width: 290px; }
.entrada { min-height: 36px; border: 1px solid #C9CEC3; border-radius: 8px; padding: 0 10px; font: inherit; flex-grow: 1; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.qr-caja { width: 200px; height: 200px; }
.qr-caja svg { width: 100%; height: 100%; display: block; }

/* ---------- Carta ---------- */
.platos { display: flex; flex-direction: column; gap: 2px; }
.plato { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; }
.plato:hover { background: var(--fondo); }
.plato.apagada { opacity: .7; }
.plato-foto { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--fondo); }
.sin-foto { display: flex; align-items: center; justify-content: center; color: #A9B3AB; border: 1px dashed var(--linea); }
.sin-foto.grande { width: 120px; height: 120px; border-radius: 12px; }
.plato-texto { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.plato-texto a { font-weight: 700; text-decoration: none; }
.plato-estado { flex-shrink: 0; }
.foto-plato { display: flex; gap: 16px; align-items: flex-start; }
.foto-plato img { border-radius: 12px; object-fit: cover; }
.tabla-platos td, .tabla-platos th { padding: 8px 10px; }
.tabla-platos select { min-height: 36px; border: 1px solid #C9CEC3; border-radius: 8px; padding: 0 8px; font: inherit; background: #fff; }

/* Interruptor de encendido/apagado */
.interruptor { width: 48px; height: 28px; border-radius: 14px; border: 0; background: var(--linea); position: relative; padding: 0; cursor: pointer; }
.interruptor span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .12s; }
.interruptor[aria-checked="true"] { background: var(--marca); }
.interruptor[aria-checked="true"] span { left: 23px; }

/* ---------- Segundo factor ---------- */
.pasos { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 6px; font-size: .95rem; color: var(--tinta-2); }
.codigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.codigos code { font-family: ui-monospace, 'IBM Plex Mono', monospace; font-size: 1rem; font-weight: 700; letter-spacing: .05em; background: var(--fondo); padding: 8px 10px; border-radius: 8px; text-align: center; }
.qr-caja.centrado { margin: 0 auto; }
.pie-guest { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: center; font-size: .9rem; }
.pie-guest button { background: none; border: 0; padding: 0; font: inherit; color: var(--marca); text-decoration: underline; cursor: pointer; }

/* ---------- Informes ---------- */
.filtros-informe { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtros-informe .entrada { max-width: 160px; }
.barras { display: flex; gap: 6px; align-items: flex-end; height: 140px; padding: 10px 0 0; overflow-x: auto; }
.barra-dia { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 34px; flex-grow: 1; height: 100%; }
.barra-dia .columna { flex-grow: 1; width: 100%; max-width: 46px; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 6px 6px 0 0; overflow: hidden; background: var(--fondo); }
.barra-dia .tarjeta-parte { display: block; background: var(--marca); }
.barra-dia .efectivo-parte { display: block; background: var(--azafran); }
.leyenda-barras { display: flex; gap: 16px; font-size: .85rem; color: var(--tinta-2); margin-top: 8px; }
.leyenda-barras span { display: flex; align-items: center; gap: 6px; }
.muestra { width: 12px; height: 12px; border-radius: 3px; }
.muestra.efectivo { background: var(--azafran); }
.muestra.tarjeta { background: var(--marca); }
.tramo { border: 1px solid var(--linea-2); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.tramo + .tramo { margin-top: -2px; }
.ahora { color: var(--marca); font-weight: 700; }

/* Tarjetas de modalidad: todas de la misma altura y el botón, abajo del todo. */
.rejilla > .modalidad { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.modalidad > .boton { margin-top: auto; }

/* Tramos de precio: cada uno con su botón de quitar en la esquina. */
.tramo { position: relative; }
.quitar-tramo { position: absolute; top: 8px; right: 8px; min-height: 32px; padding: 0 12px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; color: var(--tinta-2); font: inherit; font-size: .85rem; cursor: pointer; }
.quitar-tramo:hover { border-color: var(--error); color: var(--error); }

/* Rótulos de dos líneas: que no bajen su recuadro. Cada campo comparte las
   filas de la rejilla, así los recuadros de una misma fila quedan alineados
   aunque uno de los rótulos ocupe dos líneas. */
@supports (grid-template-rows: subgrid) {
    .fila-campos { row-gap: 6px; column-gap: 12px; align-items: start; }
    .fila-campos > .campo { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: span 3; min-width: 0; }
}
#tramos-quitados { margin: 4px 0 0; }

/* Cifras de las tablas: sin partirse en dos líneas y con los dígitos a la
   misma anchura, para poder compararlas de un vistazo. */
.tabla .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla td.corto { white-space: nowrap; }
/* En las tarjetas a dos columnas cabe menos: se aprieta el relleno antes que
   partir una cifra o esconder la columna del total. */
.dos-columnas .tabla th, .dos-columnas .tabla td { padding-left: 8px; padding-right: 8px; }
.dos-columnas .tabla th:first-child, .dos-columnas .tabla td:first-child { padding-left: 16px; }
.dos-columnas .tabla th:last-child, .dos-columnas .tabla td:last-child { padding-right: 16px; }

/* ---------- Ajustes ---------- */
.logo-ajuste { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; margin-top: 14px; }
.logo-muestra { width: 120px; height: 120px; border: 2px dashed var(--linea); border-radius: 14px; display: grid;
    place-items: center; overflow: hidden; background: var(--fondo); flex-shrink: 0; }
.logo-muestra img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-muestra .sin-logo { font-size: .85rem; color: var(--tinta-2); }
.quitar-logo { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: .9rem; }
.quitar-logo input { width: 18px; height: 18px; accent-color: var(--marca); }
.titulo-ajuste { font-weight: 700; font-size: .95rem; }

/* ---------- Suscripción ---------- */
.plan-cab { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.plan-precio { display: flex; flex-direction: column; }
.plan-precio strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.9rem; line-height: 1.1; }
.consumos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 12px; }
.consumo-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.consumo-barra { height: 10px; border-radius: 6px; background: var(--fondo); overflow: hidden; margin: 6px 0 4px; }
.consumo-barra span { display: block; height: 100%; background: var(--marca); }
.rejilla.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 12px; align-items: start; }
.planes > .plan { display: flex; flex-direction: column; gap: 10px; height: 100%; border: 1px solid var(--linea-2); }
.planes > .plan.plan-suyo { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
.plan-lista { margin: 0; padding-left: 18px; font-size: .92rem; color: var(--tinta-2); display: flex; flex-direction: column; gap: 4px; }
.planes > .plan form { margin-top: auto; }
.aviso-suscripcion { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-bottom: 16px; }

@media print {
    .lateral, .ayuda-indice, .cabecera .boton { display: none; }
    .ayuda { grid-template-columns: 1fr; }
    .ayuda-texto .tarjeta { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
}

/* ---------- Impresoras ---------- */
.dato-copiable { font-family: ui-monospace, 'IBM Plex Mono', monospace; font-size: .85rem; background: var(--fondo);
    border: 1px solid var(--linea-2); border-radius: 8px; padding: 8px 10px; word-break: break-all; display: block; }

/* ---------- Caja y arqueo ---------- */
.desglose { margin: 10px 0; }
.desglose summary { cursor: pointer; font-weight: 700; font-size: .95rem; padding: 6px 0; }
.piezas { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 8px; }
.pieza { display: flex; align-items: center; gap: 6px; border: 1px solid var(--linea-2); border-radius: 8px; padding: 6px 8px; }
.pieza span { font-size: .85rem; color: var(--tinta-2); min-width: 54px; font-variant-numeric: tabular-nums; }
.pieza input { width: 100%; min-height: 34px; border: 1px solid #C9CEC3; border-radius: 6px; padding: 0 6px; font: inherit; }
.corregir summary { display: inline-block; list-style: none; }
.corregir summary::-webkit-details-marker { display: none; }
.corregir-caja { text-align: left; background: var(--fondo); border-radius: 10px; padding: 12px; margin-top: 8px; min-width: 260px; }

/* ---------- Qué comprar ---------- */
.rejilla.compras { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 12px; align-items: start; }
.compras > .compra { display: flex; flex-direction: column; gap: 6px; height: 100%; border: 1px solid var(--linea-2); }
.compra-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.compra-cab .num { white-space: nowrap; font-weight: 700; }
.compra p { margin: 0; }
.compra .acciones { margin-top: auto; padding-top: 6px; }

/* ---------- Explotaciones, colmenares y colmenas ---------- */
.campo textarea { min-height: 88px; padding: 10px 12px; resize: vertical; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filtros .campo { min-width: 200px; }
.rega { font-family: ui-monospace, 'IBM Plex Mono', monospace; font-size: .9rem; letter-spacing: .02em; }
.reina { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.25); vertical-align: -1px; margin-right: 4px; }
.reina.azul { background: #2F6FD0; } .reina.blanco { background: #fff; } .reina.amarillo { background: #F2C230; }
.reina.rojo { background: #D0342C; } .reina.verde { background: #3C9A48; }
.vacio { text-align: center; padding: 28px; }
.historial { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.historial li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea-2); }
.historial li:first-child { border-top: 0; }
.campo input[type=datetime-local] { min-height: 44px; border: 1px solid #C9CEC3; border-radius: 10px; padding: 0 12px; font: inherit; background: #fff; color: var(--tinta); }
.colmenas-elegir { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 280px; overflow-y: auto; padding: 4px; border: 1px solid var(--linea-2); border-radius: 10px; margin-top: 8px; }
.colmenas-elegir label { display: flex; align-items: center; gap: 6px; font-weight: 400; font-size: .9rem; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.colmenas-elegir label:has(input:checked) { background: var(--azafran-suave); }

/* ---------- Mapas ---------- */
.mapa-grande { height: 68vh; min-height: 420px; border-radius: var(--radio); border: 1px solid var(--linea); z-index: 0; }
.mapa-sitio { height: 320px; border-radius: 10px; border: 1px solid #C9CEC3; margin-top: 8px; z-index: 0; cursor: crosshair; }
.leyenda { display: flex; flex-wrap: wrap; gap: 18px; color: var(--tinta-2); }
.leyenda .punto-ley { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #2B2116; vertical-align: -1px; margin-right: 6px; }
.punto-ley.casa { background: #E8A628; } .punto-ley.trashumancia { background: #2F6FD0; } .punto-ley.sin { background: #8C8378; }
.globo { display: flex; flex-direction: column; gap: 3px; font-family: 'Atkinson Hyperlegible', system-ui, sans-serif; font-size: .9rem; }
.globo strong { font-size: 1.05rem; }
.globo .enlaces { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.barra-prod { height: 6px; background: var(--azafran); border-radius: 3px; margin-top: 6px; min-width: 4px; }

/* ---- Firma electrónica: la página pública del enlace ---- */
.firma-publica { background: var(--fondo); margin: 0; }
.firma-cab { display: flex; align-items: baseline; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--linea); background: var(--papel); }
.firma-cab .marca { font-size: 1.4rem; font-weight: 700; color: var(--marca); }
.firma-cuerpo { max-width: 880px; margin: 0 auto; padding: 22px 16px 48px; display: flex; flex-direction: column; gap: 18px; }
.marco-doc iframe { width: 100%; height: 62vh; min-height: 360px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.lienzo-firma { width: 100%; max-width: 520px; height: 180px; border: 1.5px dashed #B9A98C; border-radius: 12px; background: #fff; touch-action: none; cursor: crosshair; }
.casilla { display: flex; gap: 10px; align-items: flex-start; }
.codigo-grande { font-size: 1.6rem; letter-spacing: .3em; text-align: center; max-width: 220px; }
details.tarjeta summary { cursor: pointer; font-weight: 700; }
.enlace-firma { width: 100%; font-size: 12px; }

/* ---- Modo campo: el móvil delante de las colmenas ---- */
.campo-body { background: var(--fondo); margin: 0; padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
.campo-cab { position: sticky; top: 0; z-index: 10; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 12px 16px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); background: var(--lateral); color: #fff; }
.campo-cab .marca { color: var(--azafran); font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.campo-cuenta { font-size: .85rem; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campo-cuerpo { max-width: 640px; margin: 0 auto; padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.campo-h { font-size: 1.5rem; margin: 4px 0 2px; } .campo-h2 { font-size: 1.1rem; margin: 14px 0 4px; }
.campo-volver { font-size: .95rem; text-decoration: none; }
.campo-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.campo-lista a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--papel); border: 1px solid var(--linea);
    border-radius: 14px; color: inherit; text-decoration: none; min-height: 56px; }
.campo-lista strong { font-size: 1.1rem; }
.campo-lista.compacta a { padding: 10px 14px; min-height: 0; }
.campo-botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.campo-boton { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 64px; padding: 10px;
    background: var(--papel); border: 1.5px solid var(--linea); border-radius: 14px; font-weight: 700; color: var(--tinta); text-decoration: none; }
.campo-boton.principal { grid-column: 1 / -1; background: var(--tinta); color: #fff; border-color: var(--tinta); min-height: 72px; font-size: 1.15rem; }
.campo-boton:active { transform: scale(.98); }
.campo-aviso { display: block; padding: 12px 14px; border-radius: 12px; background: var(--error-suave); color: var(--tinta); text-decoration: none; }
.campo-aviso.info { background: var(--info-suave); }
.campo-bloque { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; }
.campo-form { max-width: none; gap: 16px; }
.campo-form input, .campo-form select, .campo-form textarea { font-size: 16px; min-height: 48px; }
.campo-segmento { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.campo-segmento label { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border: 1.5px solid var(--linea);
    border-radius: 12px; background: var(--papel); font-weight: 700; }
.campo-segmento label:has(input:checked) { border-color: var(--tinta); background: var(--azafran-suave); }
.campo-fichas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.campo-fichas label { position: relative; }
.campo-fichas input { position: absolute; opacity: 0; }
.campo-fichas span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--linea); border-radius: 22px; background: var(--papel); }
.campo-fichas input:checked + span { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.campo-fichas input:focus-visible + span { outline: 2px solid var(--azafran); }
.campo-mas summary { cursor: pointer; color: var(--marca); }
.campo-enviar { width: 100%; min-height: 56px; font-size: 1.1rem; }
.campo-barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--papel); border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom, 0px); }
.campo-barra a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; min-height: 58px; font-size: .78rem;
    color: var(--tinta); text-decoration: none; }
.campo-barra a span { font-size: 1.3rem; line-height: 1; }
.campo-barra a[aria-current] { color: var(--marca); font-weight: 700; }