:root {
    color-scheme: dark;
    --noche: #15120e;
    --duna: #cda564;
    --arena: #f1ddae;
    --especia: #dc7832;
    --panel: #272017;
    --borde: #5d4528;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--arena);
    background: radial-gradient(ellipse at top, #3d2b16 0%, var(--noche) 58%);
}

main {
    width: min(960px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 5rem 0;
}

.marca {
    color: var(--especia);
    font: 700 .75rem/1 Arial, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}

h1 { margin: .45rem 0 1rem; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: normal; }
.introduccion { max-width: 43rem; color: #dfc999; font-size: 1.1rem; line-height: 1.65; }
.galeria-facciones { margin: .25rem 0 2.5rem; }
.galeria-facciones-lista { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: clamp(.35rem, 1.5vw, 1.25rem); }
.faccion-galeria { display: grid; min-width: 0; justify-items: center; gap: .55rem; color: var(--arena); text-align: center; text-decoration: none; transition: color .18s ease, transform .18s ease; }
.faccion-galeria img { display: block; width: 100%; height: clamp(76px, 13vw, 132px); object-fit: contain; filter: drop-shadow(0 .25rem .45rem rgba(0, 0, 0, .32)); transition: filter .18s ease, transform .18s ease; }
.faccion-galeria span { display: flex; width: 100%; align-items: center; gap: .38rem; color: #ddc797; font-size: clamp(.66rem, 1.35vw, .95rem); line-height: 1; white-space: nowrap; }
.faccion-galeria span::before, .faccion-galeria span::after { flex: 1 1 0; height: 1px; background: rgba(205, 165, 100, .55); content: ''; }
.faccion-galeria:hover, .faccion-galeria:focus-visible { color: var(--arena); transform: translateY(-3px); }
.faccion-galeria:hover img, .faccion-galeria:focus-visible img { filter: drop-shadow(0 .35rem .7rem rgba(220, 120, 50, .28)); transform: scale(1.04); }
.campanas-recientes .cabecera-campana-reciente { display: flex; align-items: center; gap: 1rem; }
.campanas-recientes .cabecera-campana-reciente > img { display: block; flex: 0 0 66px; width: 66px; height: 66px; object-fit: contain; }
.campanas-recientes .metadatos-campana-reciente { display: grid; min-width: 0; gap: .45rem; }
.campanas-recientes .metadatos-campana-reciente h3 { margin: 0; }
.campanas-recientes .metadatos-campana-reciente > span:not(.indicador-armamento) { font: .92rem/1.35 Arial, sans-serif; }
.campanas-recientes .metadatos-campana-reciente .indicador-armamento { order: initial; margin: -.15rem 0 0; }
.cabecera-identidad-familia { display: flex; align-items: center; gap: clamp(1.25rem, 4vw, 3rem); margin-top: .75rem; }
.cabecera-identidad-familia > img { display: block; width: clamp(180px, 22vw, 220px); height: clamp(180px, 22vw, 220px); object-fit: contain; }
.identidad-familia-texto { display: grid; gap: 1.3rem; min-width: 0; }
.identidad-familia-texto h1 { margin: 0; font-size: clamp(2.5rem, 6vw, 4.5rem); }
.acciones-familia { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.acciones-familia .volver { margin: 0; color: #a69472; font: .85rem Arial, sans-serif; text-decoration: none; }
.acciones-familia .volver:hover, .acciones-familia .volver:focus-visible { color: var(--duna); }
.campanas-familia { margin-top: 2.5rem; }
.encabezado-seccion-campanas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.encabezado-seccion-campanas h2 { margin: 0; }
.encabezado-seccion-campanas + .cuadricula-campanas { margin-top: 0; }
.campanas-familia .cabecera-campana-familia { display: flex; align-items: center; gap: 1rem; }
.campanas-familia .cabecera-campana-familia > img { display: block; flex: 0 0 66px; width: 66px; height: 66px; object-fit: contain; }
.campanas-familia .metadatos-campana-familia { display: grid; min-width: 0; gap: .45rem; }
.campanas-familia .metadatos-campana-familia h3 { margin: 0; }
.campanas-familia .metadatos-campana-familia > span:not(.indicador-armamento) { font: .92rem/1.35 Arial, sans-serif; }
.campanas-familia .metadatos-campana-familia .indicador-armamento { grid-column: auto; order: initial; margin: -.15rem 0 0; }
.cabecera-identidad-campana { display: flex; align-items: flex-start; gap: clamp(1.25rem, 4vw, 3rem); margin-top: .75rem; }
.emblema-campana { display: grid; flex: 0 0 clamp(180px, 22vw, 220px); justify-items: center; gap: .7rem; }
.emblema-campana img { display: block; width: clamp(180px, 22vw, 220px); height: clamp(180px, 22vw, 220px); object-fit: contain; }
.emblema-campana span { display: flex; width: 100%; align-items: center; gap: .6rem; color: #ddc797; font-size: 1.12rem; line-height: 1; white-space: nowrap; }
.emblema-campana span::before, .emblema-campana span::after { flex: 1 1 0; height: 1px; background: rgba(205, 165, 100, .55); content: ''; }
.identidad-campana-texto { display: grid; gap: 1rem; min-width: 0; }
.identidad-campana-texto h1 { margin: 0; font-size: clamp(2rem, 4.8vw, 3.5rem); }
.metadatos-campana-detalle { display: grid; gap: .45rem; color: #ddc797; }
.metadatos-campana-detalle p { margin: 0; }
.metadatos-campana-detalle .indicador-armamento { margin: .1rem 0; }
.metadatos-campana-detalle .comentario-general { margin: .35rem 0 0; }
.identidad-campana-texto .volver { margin: .25rem 0 0; color: #a69472; font: .85rem Arial, sans-serif; text-decoration: none; }
.identidad-campana-texto .volver:hover, .identidad-campana-texto .volver:focus-visible { color: var(--duna); }
.migas { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem; margin-top: .25rem; color: #8f8064; font: .85rem/1.45 Arial, sans-serif; }
.migas a { color: #a69472; text-decoration: none; transition: color .16s ease; }
.migas a:hover, .migas a:focus-visible { color: var(--duna); }
.migas > span[aria-hidden="true"] { color: #6f5c41; }
.migas > span[aria-current="page"] { min-width: 0; color: #ddc797; overflow-wrap: anywhere; }
.resumen-estadisticas { margin-top: 3rem; }
.tablas-estadisticas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: 1.25rem; }
.tabla-estadistica { border: 1px solid var(--borde); background: rgba(39, 32, 23, .62); }
.tabla-estadistica h3 { margin: 0; padding: .85rem 1rem .7rem; color: var(--duna); font-size: 1.05rem; font-weight: normal; }
.tabla-estadistica table { width: 100%; border-collapse: collapse; color: #ddc797; font: .88rem/1.3 Arial, sans-serif; }
.tabla-estadistica th, .tabla-estadistica td { padding: .55rem .85rem; border-top: 1px solid rgba(93, 69, 40, .62); }
.tabla-estadistica thead th { color: #bcae8a; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: left; }
.tabla-estadistica tbody th { font-weight: normal; text-align: left; }
.tabla-estadistica td, .tabla-estadistica thead th:not(:first-child) { text-align: right; }
.tabla-estadistica td { color: var(--arena); font-weight: 700; }
.tabla-estadistica tbody th img { width: 26px; height: 26px; margin-right: .55rem; object-fit: contain; vertical-align: middle; }
.tabla-estadistica tbody th span { vertical-align: middle; }
.tabla-estadistica:first-child table th:first-child { width: 52%; }
.tabla-estadistica:first-child thead th:not(:first-child), .tabla-estadistica:first-child tbody td { text-align: center; }

.estadisticas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-top: 2.75rem;
}

.estadistica {
    padding: 1.35rem;
    border: 1px solid var(--borde);
    border-top: 3px solid var(--especia);
    background: linear-gradient(145deg, rgba(48, 38, 26, .95), var(--panel));
}

.numero { display: block; color: var(--duna); font: 700 2.5rem/1 Arial, sans-serif; }
.etiqueta { display: block; margin-top: .6rem; color: #ddc797; font-size: .95rem; line-height: 1.35; }

.familias { margin-top: 3rem; }
h2 { margin: 0 0 1rem; color: var(--duna); font-size: 1.7rem; font-weight: normal; }

.cuadricula-familias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
}

.tarjeta-familia {
    display: grid;
    gap: .55rem;
    min-height: 144px;
    padding: 1.3rem;
    border: 1px solid var(--borde);
    background: rgba(39, 32, 23, .82);
    color: #ddc797;
    text-decoration: none;
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.tarjeta-familia:hover,
.tarjeta-familia:focus-visible {
    border-color: var(--especia);
    background: #342819;
    transform: translateY(-2px);
}

.tarjeta-familia h3 { margin: 0 0 .25rem; color: var(--arena); font-size: 1.25rem; font-weight: normal; }
.tarjeta-familia span { font: .92rem/1.35 Arial, sans-serif; }
.tarjeta-familia strong { color: var(--duna); }
.volver { margin-top: 2rem; }
.volver a { color: var(--duna); }

.encabezado-familia { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.encabezado-familia h1 { margin-bottom: 0; }
.campanas { margin-top: 3rem; }
.cuadricula-campanas { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.tarjeta-campana, .sin-campanas { padding: 1.3rem; border: 1px solid var(--borde); background: rgba(39, 32, 23, .82); }
.tarjeta-campana { position: relative; padding: 0; }
.enlace-campana { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: .65rem; min-height: 130px; padding: 1.3rem 3.5rem 1.3rem 1.3rem; color: #ddc797; text-decoration: none; }
.enlace-campana:hover, .enlace-campana:focus-visible { background: #342819; }
.enlace-campana h3 { margin: 0 0 .85rem; color: var(--arena); font-size: 1.25rem; font-weight: normal; }
.enlace-campana span { font: .92rem/1.35 Arial, sans-serif; }
.enlace-campana strong, .detalle-campana strong { color: var(--duna); }
.miniaturas-campana { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1rem; }
.miniatura-campana { display: grid; flex: 0 0 34px; width: 34px; height: 34px; place-items: center; overflow: hidden; border: 1px dotted var(--borde); border-radius: 3px; }
.miniatura-campana img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vista-previa-mision { position: fixed; z-index: 30; top: 30px; right: 30px; width: 440px; max-height: calc(100vh - 60px); overflow-y: auto; padding: 1.25rem; border: 1px solid var(--borde); background: #271f16; color: #ddc797; }
.vista-previa-mision h3 { margin: 0 0 1rem; color: var(--duna); font-weight: normal; }
.vista-previa-mision h4 { margin: 1rem 0 .35rem; color: var(--duna); font: .9rem Arial, sans-serif; }
.vista-previa-mision p { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.vista-previa-mision > img { display: block; width: 100%; max-height: min(220px, 25vh); object-fit: contain; }
.fila-valoracion-informativa { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 1rem; }
.fila-valoracion-informativa .valoracion-informativa { margin-top: 0; }
.completadas-informativas { color: #a69472; font: .85rem Arial, sans-serif; }
.completadas-informativas strong { color: var(--duna); font-size: 1rem; }
.valoracion-informativa { display: flex; gap: 7px; margin-top: 1rem; }
.circulo-informativo { display: block; width: 18px; height: 18px; box-sizing: border-box; border: 1px solid var(--borde); border-radius: 50%; background: transparent; }
.circulo-informativo.seleccionado { border-color: var(--duna); background: var(--duna); }
.modal-ficha-mision { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.modal-ficha-mision[hidden] { display: none; }
.ficha-mision-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .78); }
.dialogo-ficha-mision { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); width: min(1180px, 100%); max-height: 100%; overflow: auto; padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid var(--borde); background: #271f16; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .55); gap: clamp(1.5rem, 4vw, 3rem); }
.cerrar-ficha-mision { position: absolute; z-index: 1; top: .7rem; right: .8rem; border: 0; background: transparent; color: var(--arena); cursor: pointer; font-size: 2rem; line-height: 1; }
.ficha-mision-visual { display: grid; align-content: start; min-width: 0; }
.ficha-mision-visual h2 { margin: 0 2rem 1.25rem 0; color: var(--arena); font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: normal; }
.ficha-mision-visual > img { display: block; width: 100%; max-height: min(62vh, 640px); object-fit: contain; }
.ficha-mision-visual .fila-valoracion-informativa { margin-top: 1.1rem; }
.ficha-mision-texto { min-width: 0; align-self: stretch; }
.ficha-mision-texto h4 { margin: 0 0 .6rem; color: var(--duna); font: bold 1rem Arial, sans-serif; }
.ficha-mision-texto h4:not(:first-child) { margin-top: 1.5rem; }
.ficha-mision-texto p { margin: 0; color: #ddc797; white-space: pre-wrap; line-height: 1.6; }
.ficha-mision-texto .sin-texto-ficha { color: #a69472; }
.tarjeta-mision .imagen-mision { cursor: pointer; }
.editar-campana { position: absolute; top: .7rem; right: .7rem; width: 2rem; height: 2rem; border: 1px solid var(--borde); background: #271f16; color: var(--duna); cursor: pointer; font-size: 1.15rem; line-height: 1; }
.editar-campana:hover, .editar-campana:focus-visible { border-color: var(--especia); color: var(--arena); }
.sin-campanas { color: #ddc797; }

.boton-principal, .boton-secundario { appearance: none; padding: .7rem 1rem; border: 1px solid var(--especia); background: var(--especia); color: #20140b; cursor: pointer; font: 700 .9rem Arial, sans-serif; }
.boton-secundario { border-color: var(--borde); background: transparent; color: var(--arena); }
.boton-principal:hover, .boton-principal:focus-visible { background: #ed914b; }
.boton-secundario:hover, .boton-secundario:focus-visible { border-color: var(--duna); }

.modal { display: none; position: fixed; inset: 0; z-index: 10; align-items: center; justify-content: center; padding: 1rem; }
.modal-activo { display: flex; }
.modal-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.dialogo-modal { position: relative; width: min(100%, 480px); padding: 1.6rem; border: 1px solid var(--borde); background: #271f16; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .5); }
.dialogo-modal h2 { margin-right: 2rem; }
.cerrar-modal { position: absolute; top: .65rem; right: .75rem; border: 0; background: transparent; color: var(--arena); cursor: pointer; font-size: 2rem; line-height: 1; }
.dialogo-modal form { display: grid; gap: .6rem; margin-top: 1.25rem; }
.dialogo-modal label { color: #ddc797; font: 700 .9rem Arial, sans-serif; }
.dialogo-modal input { width: 100%; padding: .7rem; border: 1px solid var(--borde); background: #17130e; color: var(--arena); font: 1rem Arial, sans-serif; }
.interruptor-armamento { display: flex; align-items: center; gap: .7rem; color: #ddc797; font: 700 .9rem Arial, sans-serif; }
.interruptor-armamento input { appearance: none; width: 2.4rem; height: 1.3rem; padding: 0; border-radius: 1rem; background: #17130e; cursor: pointer; }
.interruptor-armamento input:checked { background: var(--duna); }
.comentario-campana { display: grid; gap: .45rem; color: #ddc797; font: 700 .9rem Arial, sans-serif; }
.comentario-campana textarea { width: 100%; resize: vertical; padding: .7rem; border: 1px solid var(--borde); background: #17130e; color: var(--arena); font: 1rem/1.4 Arial, sans-serif; }
.indicador-armamento { display: flex; align-items: center; gap: .35rem; margin: .35rem 0 .7rem; color: #bcae8a; font: .8rem Arial, sans-serif; }
.indicador-armamento svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.tarjeta-campana .enlace-campana h3 { grid-column: 1; margin: 0; }
.tarjeta-campana .indicador-armamento { display: inline-flex; grid-column: 1; order: 2; justify-self: start; margin: 0; }
.tarjeta-campana .enlace-campana > span:not(.indicador-armamento) { grid-column: 1; order: 4; margin: 0; }
.comentario-general { margin: .8rem 0 1rem; color: #ddc797; line-height: 1.5; white-space: normal; }
.tarjeta-campana .comentario-general { grid-column: 1; order: 3; margin: 0; font-size: .95rem; }
.tarjeta-campana .miniaturas-campana { grid-column: 1; order: 5; margin-top: .2rem; }
.errores-formulario { padding: .75rem 1rem; border-left: 3px solid var(--especia); background: #3a2115; color: #f1ccad; }
.errores-formulario p { margin: .3rem 0; }
.acciones-modal { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .7rem; margin-top: .8rem; }
.misiones { margin-top: 3rem; }
.cuadricula-misiones { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.tarjeta-mision { position: relative; padding: 1.3rem; border: 1px solid var(--borde); background: rgba(39, 32, 23, .82); }
.tarjeta-mision h3 { margin: 0 0 .8rem; color: var(--duna); font-size: 1.2rem; font-weight: normal; }
.contenido-mision { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.imagen-mision { display: grid; place-items: center; color: #9f8965; }
.imagen-mision img { max-width: 100%; height: auto; }
.datos-mision { display: grid; align-content: start; gap: 1rem; }
.disparador-detalles, .fila-comentario { padding: 0; border: 0; background: transparent; color: var(--duna); cursor: pointer; text-align: left; font: inherit; }
.caja-detalles { display: none; position: absolute; z-index: 3; width: min(34rem, calc(100vw - 2rem)); margin-top: .5rem; padding: 1rem; background: #271f16; border: 1px solid var(--borde); color: #ddc797; line-height: 1.5; }
.detalles-wrap:hover .caja-detalles, .detalles-wrap:focus-within .caja-detalles, .detalles-abiertos .caja-detalles { display: block; }
.fila-comentario span { opacity: 0; margin-left: .35rem; }
.fila-comentario:hover span, .fila-comentario:focus-visible span { opacity: 1; }
.completada button { margin-left: .35rem; }
.completada small { display: block; color: #f1ccad; }
.valoracion { display: flex; align-items: center; gap: .35rem; }
.valoracion button { width: .8rem; height: .8rem; padding: 0; border: 1px solid var(--borde); border-radius: 50%; background: transparent; }
.valoracion button.seleccionado { background: var(--duna); border-color: var(--duna); }
.valoracion small { color: #f1ccad; }
.disparador-detalles svg, .comentario-consulta svg { width: 1em; height: 1em; margin-right: .4em; vertical-align: -.12em; fill: none; stroke: currentColor; stroke-width: 1.5; }
.comentario-wrap { position: relative; display: flex; align-items: center; gap: .35rem; }
.comentario-consulta { padding: 0; border: 0; background: transparent; color: var(--duna); cursor: pointer; font: inherit; }
.comentario-wrap.sin-contenido .comentario-consulta { color: #9f8965; cursor: default; }
.comentario-wrap .caja-detalles { display: none; position: absolute; z-index: 4; width: min(34rem, calc(100vw - 2rem)); padding: 1rem; border: 1px solid var(--borde); background: #271f16; color: #ddc797; line-height: 1.5; }
.comentario-wrap:hover .caja-detalles, .comentario-wrap:focus-within .caja-detalles, .comentario-wrap.detalles-abiertos .caja-detalles { display: block; }
.caja-detalles { display: none !important; }
.caja-informativa-flotante { position: fixed; z-index: 20; padding: 1rem; border: 1px solid var(--borde); background: #271f16; color: #ddc797; line-height: 1.5; overflow-y: auto; }
.editar-comentario { border: 0; background: transparent; color: var(--duna); cursor: pointer; opacity: 0; }
.comentario-wrap:hover .editar-comentario, .editar-comentario:focus-visible { opacity: 1; }
.completada { position: relative; }
.completada button { width: 1.5rem; height: 1.5rem; border: 1px solid var(--borde); border-radius: 50%; background: transparent; color: var(--borde); opacity: 0; }
.completada:hover button, .completada:focus-within button, .completada:focus button { opacity: 1; }
@media (hover: none) { .editar-comentario, .completada button { opacity: 1; } }
.tarjeta-mision p { margin: 0; color: #ddc797; line-height: 1.5; white-space: normal; }
.miniatura-mision { display: block; width: 100%; max-height: 180px; margin-top: 1rem; object-fit: cover; border: 1px solid var(--borde); }
.nueva-mision { min-height: 170px; border: 2px dashed var(--borde); background: transparent; color: var(--duna); cursor: pointer; font: 1.15rem Georgia, serif; }
.nueva-mision:hover, .nueva-mision:focus-visible { border-color: var(--especia); color: var(--arena); }
.editar-mision { position: absolute; top: .7rem; right: .7rem; width: 2rem; height: 2rem; border: 1px solid var(--borde); background: #271f16; color: var(--duna); cursor: pointer; font-size: 1.15rem; line-height: 1; opacity: 0; transition: opacity .16s ease; }
.tarjeta-mision:hover .editar-mision, .editar-mision:focus-visible { opacity: 1; }
.editar-mision:hover, .editar-mision:focus-visible { border-color: var(--especia); color: var(--arena); }
.dialogo-modal textarea { width: 100%; resize: vertical; padding: .7rem; border: 1px solid var(--borde); background: #17130e; color: var(--arena); font: 1rem/1.4 Arial, sans-serif; }
.zona-imagen { margin-top: .5rem; padding: 1rem; border: 1px dashed var(--borde); color: #ddc797; text-align: center; }
.zona-imagen p { margin: 0; }
.zona-imagen img { display: block; width: 100%; max-height: 180px; margin: .8rem 0; object-fit: contain; }

/* Edición y presentación compacta de misiones. */
.tarjeta-mision h3 { margin-bottom: 1rem; color: #f0d9a8; font-size: 1.38rem; }
.contenido-mision { grid-template-columns: minmax(0, 1.25fr) minmax(180px, .75fr); align-items: start; }
.imagen-mision { min-height: 180px; padding: .35rem; border: 1px solid rgba(188, 174, 138, .32); background: rgba(23, 19, 14, .36); }
.imagen-mision img { display: block; width: 100%; max-height: 340px; object-fit: contain; }
.datos-mision { gap: 1.15rem; }
.indicadores-mision { display: flex; flex-wrap: wrap; gap: .45rem; min-height: 0; }
.indicadores-mision:empty { display: none; }
.indicadores-mision span { padding: .2rem .45rem; border: 1px solid rgba(188, 174, 138, .55); border-radius: 999px; color: #bcae8a; font: .78rem Arial, sans-serif; }
.completada { display: grid; gap: .45rem; }
.controles-completada { display: flex; gap: .45rem; }
.completada button { width: 1.5rem; height: 1.5rem; margin: 0; border: 1px solid var(--borde); border-radius: 50%; background: transparent; color: var(--borde); opacity: 1; }
.completada button:disabled { opacity: .4; cursor: not-allowed; }
.valoracion { margin-top: -.25rem; }
.dialogo-modal-mision { width: min(100%, 880px); max-height: calc(100vh - 2rem); overflow-y: auto; }
.dialogo-modal-mision form { grid-template-columns: minmax(220px, .85fr) minmax(280px, 1.15fr); column-gap: 1.2rem; align-items: start; }
.campos-mision { display: grid; gap: .6rem; }
.campos-mision-derecha textarea { min-height: 7rem; }
.campos-mision-derecha textarea[data-descripcion-mision] { min-height: 14rem; }
.acciones-modal-mision { grid-column: 1 / -1; margin-top: 0; }

/* Tarjeta de misión: la captura concentra el peso visual. */
.tarjeta-mision h3 { display: inline-block; margin: 0 1rem 1rem 0; }
.tarjeta-mision > .valoracion { display: inline-flex; margin: 0; vertical-align: .16rem; }
.tarjeta-mision > .valoracion button { width: .9rem; height: .9rem; }
.contenido-mision { display: block; }
.imagen-mision { display: flex; width: 100%; height: 300px; min-height: 300px; padding: 0; border: 0; background: transparent; align-items: center; justify-content: center; }
.imagen-mision img { width: 100%; max-width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.datos-mision { display: block; }
.indicadores-mision { display: none; }
.completada { display: flex; align-items: center; gap: .65rem; margin-top: 1rem; }
.controles-completada { gap: .4rem; }
.completada small { flex-basis: 100%; }

/* Pie de victorias: etiqueta, cifra y controles permanecen alineados. */
.completada { display: grid; grid-template-columns: 1fr auto 1fr; gap: .65rem; width: 100%; white-space: nowrap; }
.completada > span { align-self: center; color: #8f8064; font: .78rem Arial, sans-serif; }
.completada > [data-contador] { min-width: 2.2rem; padding: .18rem .45rem; border: 1px solid var(--borde); color: var(--arena); font: 700 1.05rem/1 Georgia, serif; text-align: center; }
.controles-completada { justify-content: flex-end; }
.completada small { grid-column: 1 / -1; white-space: normal; }

@media (max-width: 640px) {
    .contenido-mision, .dialogo-modal-mision form { grid-template-columns: 1fr; }
    .acciones-modal-mision { grid-column: auto; }
    .tablas-estadisticas { grid-template-columns: 1fr; }
    .cabecera-identidad-familia { align-items: flex-start; flex-direction: column; gap: .75rem; }
    .cabecera-identidad-familia > img { width: 180px; height: 180px; }
    .cabecera-identidad-campana { align-items: flex-start; flex-direction: column; gap: .75rem; }
    .emblema-campana { flex-basis: 180px; }
    .emblema-campana img { width: 180px; height: 180px; }
    .dialogo-ficha-mision { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
    main { padding: 2.5rem 0; }
    .encabezado-familia { align-items: flex-start; flex-direction: column; }
    .encabezado-familia .boton-principal { width: 100%; }
    .acciones-modal > * { flex: 1 1 auto; }
    .contenido-mision { grid-template-columns: 1fr; }
}

@media (hover: none) { .editar-mision { opacity: 1; } }
@media (hover: none) { .fila-comentario span { opacity: 1; } }