/* Misifú · estilos comunes (panel, portal y web comercial). Requiere tokens.css */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:100%}
html[data-tam="1"]{font-size:112.5%}
html[data-tam="2"]{font-size:125%}
body{margin:0;background:var(--mf-fondo);color:var(--mf-texto);font-family:var(--mf-fuente-texto);font-size:var(--mf-t-m);line-height:var(--mf-interlinea-texto);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--mf-fuente-titular);font-weight:var(--mf-peso-titular);line-height:var(--mf-interlinea-titular);letter-spacing:var(--mf-tracking-titular);margin:0 0 .5em}
h1{font-size:clamp(1.9rem,4vw,var(--mf-t-3xl))}
h2{font-size:clamp(1.5rem,3vw,var(--mf-t-2xl))}
h3{font-size:var(--mf-t-l)}
p{margin:0 0 1em;max-width:var(--mf-medida)}
a{color:var(--mf-enlace);text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{text-decoration-color:var(--mf-lima)}
:focus-visible{outline:3px solid var(--mf-foco);outline-offset:2px;box-shadow:0 0 0 6px var(--mf-foco-halo);border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:8px;top:-60px;background:var(--mf-tinta);color:#fff;padding:10px 16px;border-radius:8px;z-index:999}
.saltar:focus{top:8px}
.suave{color:var(--mf-texto-suave)}
.pequeno{font-size:var(--mf-t-s)}
.mini{font-size:var(--mf-t-xs)}
.nowrap{white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}
.subrayado{background:linear-gradient(transparent 82%,var(--mf-subrayado) 82%);padding:0 .05em}

/* Lectura fácil: textos dobles */
.t-lf{display:none}
html[data-lf="1"] .t-n{display:none}
html[data-lf="1"] .t-lf{display:inline}
html[data-lf="1"] body{line-height:1.75;word-spacing:.06em}
html[data-lf="1"] .solo-n{display:none!important}
.solo-lf{display:none!important}
html[data-lf="1"] .solo-lf{display:block!important}

/* Alto contraste */
html[data-contraste="alto"]{--mf-fondo:#fff;--mf-superficie:#fff;--mf-superficie-2:#fff;--mf-texto:#000;--mf-texto-suave:#000;--mf-borde:#000;--mf-borde-fuerte:#000;--mf-enlace:#003d14;--mf-accion:#000;--mf-accion-hover:#222}
html[data-contraste="alto"] .tarjeta,html[data-contraste="alto"] .campo input,html[data-contraste="alto"] .campo select,html[data-contraste="alto"] .campo textarea{border-color:#000;border-width:2px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:var(--mf-control-alto);padding:.55em 1.2em;border-radius:var(--mf-r-m);border:2px solid var(--mf-accion);background:var(--mf-accion);color:var(--mf-accion-texto);font-family:var(--mf-fuente-titular);font-weight:600;font-size:var(--mf-t-s);text-decoration:none;cursor:pointer;line-height:1.2;transition:background .15s,transform .1s}
.btn:hover{background:var(--mf-accion-hover);border-color:var(--mf-accion-hover);color:var(--mf-accion-texto)}
.btn:active{transform:translateY(1px)}
.btn--sec{background:transparent;color:var(--mf-texto);border-color:var(--mf-borde-fuerte)}
.btn--sec:hover{background:var(--mf-superficie-2);color:var(--mf-texto);border-color:var(--mf-texto)}
.btn--lima{background:var(--mf-lima);border-color:var(--mf-lima);color:var(--mf-tinta)}
.btn--lima:hover{background:#7bdc63;border-color:#7bdc63;color:var(--mf-tinta)}
.btn--tinta{background:var(--mf-tinta);border-color:var(--mf-tinta);color:#fff}
.btn--peligro{background:transparent;color:var(--mf-incidencia);border-color:var(--mf-incidencia)}
.btn--peligro:hover{background:var(--mf-incidencia-fondo);color:var(--mf-incidencia)}
.btn--pequeno{min-height:38px;padding:.35em .85em;font-size:var(--mf-t-xs)}
.btn--grande{min-height:60px;font-size:var(--mf-t-m);padding:.7em 1.6em}
.btn--bloque{width:100%}
.btn .picto{width:22px;height:22px}
.btn-fila{display:flex;flex-wrap:wrap;gap:var(--mf-e-3);align-items:center}

/* ---------- Formularios ---------- */
.form{display:grid;gap:var(--mf-e-5)}
.form-rejilla{display:grid;gap:var(--mf-e-4) var(--mf-e-5);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.campo{display:flex;flex-direction:column;gap:6px}
.campo--ancho{grid-column:1/-1}
.campo label,.campo .etq{font-family:var(--mf-fuente-titular);font-weight:500;font-size:var(--mf-t-s)}
.campo .ayuda{font-size:var(--mf-t-xs);color:var(--mf-texto-suave)}
.campo input:not([type=checkbox]):not([type=radio]),.campo select,.campo textarea{width:100%;min-height:var(--mf-control-alto);padding:.6em .8em;border:2px solid var(--mf-borde);border-radius:var(--mf-r-s);background:var(--mf-superficie);color:var(--mf-texto);font:inherit;font-size:var(--mf-t-m)}
.campo textarea{min-height:120px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--mf-texto);outline:none;box-shadow:0 0 0 4px var(--mf-foco-halo)}
.campo--error input,.campo--error select,.campo--error textarea{border-color:var(--mf-incidencia)}
.campo .error{color:var(--mf-incidencia);font-size:var(--mf-t-s);font-weight:700}
.casilla{display:flex;gap:.6em;align-items:flex-start;cursor:pointer}
.casilla input{width:24px;height:24px;margin-top:2px;accent-color:var(--mf-hoja);flex:none}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-family:var(--mf-fuente-titular);font-weight:600;font-size:var(--mf-t-l);margin-bottom:var(--mf-e-3);padding:0}

/* Opciones grandes con pictograma (lectura fácil) */
.elegir{display:grid;gap:var(--mf-e-3);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.elegir label{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;min-height:120px;padding:var(--mf-e-4);border:2px solid var(--mf-borde);border-radius:var(--mf-r-m);background:var(--mf-superficie);cursor:pointer;font-family:var(--mf-fuente-titular);font-weight:500;line-height:1.25}
.elegir label .picto{width:40px;height:40px}
.elegir .emoji{font-size:34px;line-height:1}
.elegir input{position:absolute;opacity:0;pointer-events:none}
.elegir input:checked+label,.elegir label:has(input:checked){border-color:var(--mf-tinta);background:var(--mf-lima-claro);box-shadow:inset 0 0 0 2px var(--mf-tinta)}
.elegir input:focus-visible+label,.elegir label:has(input:focus-visible){outline:3px solid var(--mf-foco);outline-offset:2px}

/* ---------- Tarjetas, rejillas ---------- */
.tarjeta{background:var(--mf-superficie);border:1px solid var(--mf-borde);border-radius:var(--mf-r-l);padding:var(--mf-e-5);box-shadow:var(--mf-sombra-1)}
.tarjeta--plana{box-shadow:none}
.tarjeta h2,.tarjeta h3{margin-top:0}
.tarjeta-cab{display:flex;justify-content:space-between;align-items:center;gap:var(--mf-e-3);margin-bottom:var(--mf-e-4);flex-wrap:wrap}
.tarjeta-cab h2,.tarjeta-cab h3{margin:0}
.rejilla{display:grid;gap:var(--mf-e-5)}
.rejilla-2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.rejilla-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rejilla-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pila{display:flex;flex-direction:column;gap:var(--mf-e-5)}
.fila{display:flex;gap:var(--mf-e-3);align-items:center;flex-wrap:wrap}
.entre{justify-content:space-between}

/* Cifras */
.cifra{background:var(--mf-superficie);border:1px solid var(--mf-borde);border-radius:var(--mf-r-l);padding:var(--mf-e-5);display:flex;flex-direction:column;gap:4px}
.cifra .picto{width:30px;height:30px;color:var(--mf-hoja)}
.cifra b{font-family:var(--mf-fuente-titular);font-size:clamp(2rem,4vw,2.6rem);font-weight:600;line-height:1.05;font-variant-numeric:tabular-nums}
.cifra span{color:var(--mf-texto-suave);font-size:var(--mf-t-s);line-height:1.3}
.cifra--alerta{border-color:var(--mf-incidencia);background:var(--mf-incidencia-fondo)}
.cifra--alerta b{color:var(--mf-incidencia)}

/* Insignias de estado (texto + signo, nunca solo color) */
.insignia{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--mf-r-pill);font-size:var(--mf-t-xs);font-weight:700;line-height:1.4;white-space:nowrap;background:var(--mf-n-100);color:var(--mf-n-800)}
.insignia::before{font-size:.95em;line-height:1}
.insignia--activa{background:var(--mf-activa-fondo);color:var(--mf-activa)}.insignia--activa::before{content:"●"}
.insignia--riesgo{background:var(--mf-riesgo-fondo);color:var(--mf-riesgo)}.insignia--riesgo::before{content:"▲"}
.insignia--incidencia{background:var(--mf-incidencia-fondo);color:var(--mf-incidencia)}.insignia--incidencia::before{content:"!"}
.insignia--esterilizada{background:var(--mf-esterilizada-fondo);color:var(--mf-esterilizada)}.insignia--esterilizada::before{content:"✓"}
.insignia--pendiente{background:var(--mf-pendiente-fondo);color:var(--mf-pendiente)}.insignia--pendiente::before{content:"?"}
.insignia--inactiva{background:var(--mf-inactiva-fondo);color:var(--mf-inactiva)}.insignia--inactiva::before{content:"–"}
.insignia--lima{background:var(--mf-lima);color:var(--mf-tinta)}

/* Avisos */
.aviso{display:flex;gap:var(--mf-e-3);align-items:flex-start;padding:var(--mf-e-4) var(--mf-e-5);border-radius:var(--mf-r-m);border:2px solid var(--mf-borde);background:var(--mf-superficie);margin-bottom:var(--mf-e-4)}
.aviso--ok{border-color:var(--mf-activa);background:var(--mf-activa-fondo);color:var(--mf-activa)}
.aviso--error{border-color:var(--mf-incidencia);background:var(--mf-incidencia-fondo);color:var(--mf-incidencia)}
.aviso--info{border-color:var(--mf-esterilizada);background:var(--mf-esterilizada-fondo);color:var(--mf-esterilizada)}
.aviso--miel{border-color:var(--mf-miel);background:#FFF6E0;color:var(--mf-miel-oscuro)}
.aviso p{margin:0}

/* Tablas */
.tabla-envoltura{overflow-x:auto;border:1px solid var(--mf-borde);border-radius:var(--mf-r-m);background:var(--mf-superficie)}
table.tabla{width:100%;border-collapse:collapse;font-size:var(--mf-t-s)}
.tabla th,.tabla td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--mf-borde);vertical-align:top}
.tabla th{font-family:var(--mf-fuente-titular);font-weight:600;font-size:var(--mf-t-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--mf-texto-suave);background:var(--mf-superficie-2);white-space:nowrap}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:var(--mf-n-100)}
.tabla td.num,.tabla th.num{text-align:right;font-variant-numeric:tabular-nums}
.tabla a{font-weight:700}

/* Listas de definición (fichas) */
.datos{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:8px 20px;margin:0}
.datos dt{color:var(--mf-texto-suave);font-size:var(--mf-t-s)}
.datos dd{margin:0;font-weight:700}

/* Línea de tiempo */
.cronologia{list-style:none;margin:0;padding:0;border-left:3px solid var(--mf-borde);margin-left:8px}
.cronologia li{position:relative;padding:0 0 var(--mf-e-4) var(--mf-e-5)}
.cronologia li::before{content:"";position:absolute;left:-9.5px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--mf-superficie);border:3px solid var(--mf-hoja)}
.cronologia .cuando{font-size:var(--mf-t-xs);color:var(--mf-texto-suave)}

/* Pestañas y filtros */
.filtros{display:flex;flex-wrap:wrap;gap:var(--mf-e-3);align-items:flex-end;margin-bottom:var(--mf-e-4)}
.filtros .campo{min-width:160px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:4px 14px;border-radius:var(--mf-r-pill);border:2px solid var(--mf-borde);background:var(--mf-superficie);color:var(--mf-texto);text-decoration:none;font-size:var(--mf-t-s);font-weight:600}
.chip[aria-current="true"],.chip.activo{background:var(--mf-tinta);border-color:var(--mf-tinta);color:#fff}

.vacio{text-align:center;padding:var(--mf-e-7) var(--mf-e-5);color:var(--mf-texto-suave)}
.vacio .picto{width:56px;height:56px;color:var(--mf-n-400);margin-bottom:var(--mf-e-3)}

/* Mapa */
.mapa{width:100%;height:520px;border-radius:var(--mf-r-l);border:1px solid var(--mf-borde);overflow:hidden;background:#e9e4d8;z-index:0}
.mapa--alto{height:calc(100vh - 180px);min-height:420px}
.mapa--mini{height:260px}
.leaflet-container{font-family:var(--mf-fuente-texto)!important;font-size:16px!important}
.leaflet-tile-pane{filter:saturate(.55) sepia(.12) brightness(1.03)}
.leaflet-popup-content-wrapper{border-radius:var(--mf-r-m)!important;box-shadow:var(--mf-sombra-3)!important}
.leaflet-popup-content{margin:14px 16px!important;line-height:1.45!important}
.leaflet-popup-content h3{font-size:1.1rem;margin:0 0 6px}
.pin-mf{background:none;border:0}
.pin-mf img{width:100%;height:100%;filter:drop-shadow(0 2px 0 rgba(17,22,19,.25))}
.leyenda{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--mf-t-s);margin-top:var(--mf-e-3)}
.leyenda span{display:inline-flex;align-items:center;gap:6px}
.leyenda img{width:22px;height:26px}

/* Fotos */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.galeria img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--mf-r-m);border:1px solid var(--mf-borde);background:var(--mf-n-100)}
.avatar-gato{width:56px;height:56px;border-radius:14px;object-fit:cover;background:var(--mf-arena);display:grid;place-items:center;color:var(--mf-n-500);flex:none}
.avatar-gato svg{width:30px;height:30px}

/* Barra de progreso */
.barra{height:12px;border-radius:99px;background:var(--mf-n-200);overflow:hidden}
.barra i{display:block;height:100%;background:var(--mf-hoja);border-radius:99px}
.barra--lima i{background:var(--mf-lima)}

/* Gráfico de barras SVG */
.grafico{width:100%;height:auto}
.grafico text{font-family:var(--mf-fuente-texto);font-size:12px;fill:var(--mf-texto-suave)}

/* Picto */
.picto{width:24px;height:24px;flex:none;vertical-align:middle}

/* Barra de accesibilidad */
.acc{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.acc button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 12px;border-radius:var(--mf-r-pill);border:2px solid var(--mf-borde-fuerte);background:var(--mf-superficie);color:var(--mf-texto);font:600 var(--mf-t-xs)/1 var(--mf-fuente-titular);cursor:pointer}
.acc button[aria-pressed="true"]{background:var(--mf-tinta);color:#fff;border-color:var(--mf-tinta)}
.acc svg{width:18px;height:18px}

/* Pasos (asistente) */
.pasos{display:flex;gap:6px;margin-bottom:var(--mf-e-5)}
.pasos i{flex:1;height:8px;border-radius:99px;background:var(--mf-n-200)}
.pasos i.hecho{background:var(--mf-hoja)}
.pasos i.actual{background:var(--mf-lima)}
.paso[hidden]{display:none}

/* Diálogo */
dialog{border:0;border-radius:var(--mf-r-l);padding:var(--mf-e-6);max-width:min(560px,calc(100vw - 32px));box-shadow:var(--mf-sombra-3);background:var(--mf-superficie);color:var(--mf-texto)}
dialog::backdrop{background:rgba(17,22,19,.5)}

@media (max-width:640px){
  .tarjeta{padding:var(--mf-e-4);border-radius:var(--mf-r-m)}
  .datos{grid-template-columns:1fr;gap:2px}
  .datos dd{margin-bottom:10px}
  .mapa{height:420px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.no-imprimir,.p-lateral,.p-barra,.p-movil,.acc{display:none!important}body{background:#fff}.tarjeta{box-shadow:none;break-inside:avoid}}
[hidden]{display:none!important}
.rejilla>*,.pila>*{min-width:0}

/* Texto justificado (petición de JLM, 13/11/2026), con separación silábica en español.
   En modo «Lectura fácil» se alinea a la izquierda, como pide la norma de lectura fácil,
   y tampoco se justifica en pantallas muy estrechas, donde abriría huecos entre palabras. */
@media (min-width:480px){
  main p, main .c-prosa li, main .cuerpo li, main .c-checklist p, main .tarjeta li{
    text-align:justify;-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:6 3 3;text-wrap:pretty}
}
html[data-lf="1"] main p, html[data-lf="1"] main li, html[data-lf="1"] .pt-pie p, html[data-lf="1"] .c-pie p{text-align:left;-webkit-hyphens:manual;hyphens:manual}
/* Tarjetas estrechas del panel y del portal: sin justificar */
main .tarjeta p,main .cifra span,main .aviso p{text-align:left}
/* Listas y celdas de tabla: siempre a la izquierda, sin partir palabras */
main .tareas li,main .tabla td,main .tabla th{text-align:left;-webkit-hyphens:manual;hyphens:manual}
main .tabla td.num,main .tabla th.num{text-align:right}

/* Ventana de zona del mapa público: ancho fijo y texto sin justificar (13/11/2026) */
.zp-pop .leaflet-popup-content{width:250px!important;margin:14px 16px 12px!important}
.zp{color:#111613} .zp,.zp p{text-align:left!important;-webkit-hyphens:manual!important;hyphens:manual!important}
.zp h3{font-family:var(--mf-fuente-titular);font-size:1.15rem;margin:0 22px 4px 0;line-height:1.2}
.zp-estado{display:flex;align-items:center;gap:7px;margin:0 0 10px!important;font-size:.85rem;color:#4a524d}
.zp-estado i{width:11px;height:11px;border-radius:50%;flex:none;box-shadow:0 0 0 1.5px #111613}
.zp-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 10px}
.zp-cifras div{background:#F3EFE6;border-radius:8px;padding:7px 6px;text-align:center}
.zp-cifras b{display:block;font-family:var(--mf-fuente-titular);font-size:1.15rem;line-height:1.1}
.zp-cifras span{font-size:.72rem;color:#4a524d}
.zp-linea{margin:0 0 8px!important;font-size:.85rem}
.zp-nota{margin:0!important;font-size:.75rem;color:#4a524d;border-top:1px solid rgba(17,22,19,.12);padding-top:7px}
