@font-face {
    font-family: "Source Serif 4";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
}

/* Tokens de marca. Alto contraste: se usa bajo sol directo en arena y rancho. */
:root,
[data-bs-theme="light"] {
    --mc-bg: #fbf8f4;
    --mc-surface: #ffffff;
    --mc-text: #1a1411;
    --mc-muted: #5a4d44;
    --mc-border: #cbbfb3;
    --mc-primary: #7a2e12;      /* cuero */
    --mc-primary-text: #ffffff;
    --mc-accent: #b7791f;       /* dorado */
    --mc-header: #7a2e12;
    --mc-header-text: #ffffff;
    --mc-sheet: #f4efe8;
    --mc-gold: #d9b27c;
    --mc-sombra: 0 4px 14px rgba(60, 35, 15, .12);
    --mc-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

    --bs-body-bg: var(--mc-bg);
    --bs-body-color: var(--mc-text);
    --bs-secondary-color: var(--mc-muted);
    --bs-border-color: var(--mc-border);
    --bs-primary: var(--mc-primary);
    --bs-primary-rgb: 122, 46, 18;
    --bs-link-color: var(--mc-primary);
    --bs-link-color-rgb: 122, 46, 18;
}

[data-bs-theme="dark"] {
    --mc-bg: #15110e;
    --mc-surface: #221b17;
    --mc-text: #f7f1ea;
    --mc-muted: #c9bcb0;
    --mc-border: #4a3d35;
    --mc-primary: #f0a36b;
    --mc-primary-text: #1a0d05;
    --mc-accent: #f2c14e;
    --mc-header: #221b17;
    --mc-header-text: #f7f1ea;
    --mc-sheet: #15110e;
    --mc-gold: #e3bd86;
    --mc-sombra: 0 4px 14px rgba(0, 0, 0, .45);
    --mc-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

    --bs-body-bg: var(--mc-bg);
    --bs-body-color: var(--mc-text);
    --bs-secondary-color: var(--mc-muted);
    --bs-border-color: var(--mc-border);
    --bs-primary: var(--mc-primary);
    --bs-primary-rgb: 240, 163, 107;
    --bs-link-color: var(--mc-primary);
    --bs-link-color-rgb: 240, 163, 107;
}

html {
    font-size: 17px;
}

body {
    background: var(--mc-bg);
    color: var(--mc-text);
    min-height: 100vh;
    -webkit-tap-highlight-color: transparent;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(env(safe-area-inset-top) + .6rem) 1rem .6rem;
    background: var(--mc-header);
    color: var(--mc-header-text);
    box-shadow: 0 1px 0 var(--mc-border);
}

.app-header > div:first-child {
    min-width: 0;
}

/* Cambiar de cuenta (admin): franja abajo mientras se ve la app como otro usuario. */
.app-como { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .5rem 1rem calc(env(safe-area-inset-bottom) + .5rem); background: #8a1c1c; color: #fff; font-size: .9rem; }
.app-como-quien { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-como .btn { flex-shrink: 0; }
body:has(.app-como) .app-main { padding-bottom: 4.5rem; }

.app-brand {
    font-size: 1.05rem;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sync {
    white-space: nowrap;
}

.app-main {
    padding-top: 1.25rem;
    padding-bottom: calc(env(safe-area-inset-bottom) + 6rem);
    max-width: 720px;
}

.app-sync {
    background: var(--mc-accent);
    color: #1a0d05;
    font-weight: 600;
}

.btn-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: inherit;
    border: 1px solid transparent;
    font-size: 1.2rem;
}

.btn-icon:disabled {
    border-color: transparent;
    opacity: .3;
}

.btn-icon:hover,
.btn-icon:focus-visible {
    border-color: currentColor;
    color: inherit;
}

/* Objetivos tactiles grandes (guantes, prisa, sol). */
.btn,
.form-control,
.form-select {
    min-height: 48px;
    font-size: 1rem;
}

.form-control,
.form-select {
    border-width: 2px;
}

.form-label {
    font-weight: 600;
}

.btn-primary {
    --bs-btn-bg: var(--mc-primary);
    --bs-btn-border-color: var(--mc-primary);
    --bs-btn-color: var(--mc-primary-text);
    --bs-btn-hover-bg: var(--mc-primary);
    --bs-btn-hover-border-color: var(--mc-primary);
    --bs-btn-hover-color: var(--mc-primary-text);
    --bs-btn-active-bg: var(--mc-primary);
    --bs-btn-active-border-color: var(--mc-primary);
    --bs-btn-active-color: var(--mc-primary-text);
    --bs-btn-disabled-bg: var(--mc-primary);
    --bs-btn-disabled-border-color: var(--mc-primary);
    --bs-btn-disabled-color: var(--mc-primary-text);
    font-weight: 700;
}

/* Botones con contorno en el color de la marca (Bootstrap los trae azules). */
.btn-outline-primary {
    --bs-btn-color: var(--mc-primary);
    --bs-btn-border-color: var(--mc-primary);
    --bs-btn-hover-bg: var(--mc-primary);
    --bs-btn-hover-border-color: var(--mc-primary);
    --bs-btn-hover-color: var(--mc-primary-text);
    --bs-btn-active-bg: var(--mc-primary);
    --bs-btn-active-border-color: var(--mc-primary);
    --bs-btn-active-color: var(--mc-primary-text);
    --bs-btn-disabled-color: var(--mc-primary);
    --bs-btn-disabled-border-color: var(--mc-primary);
    font-weight: 600;
}

.card {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 1rem;
}

:focus-visible {
    outline: 3px solid var(--mc-accent);
    outline-offset: 2px;
}

.app-toasts {
    z-index: 1090;
    /* Encima del boton flotante (+). */
    padding-bottom: calc(env(safe-area-inset-bottom) + 5.5rem) !important;
    width: min(100%, 420px);
}

.app-toasts .toast {
    width: 100%;
}

/* Barra superior de escena (volver + titulo + accion). */
.scene-top {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: -.25rem 0 1.25rem;
}

.scene-top h1 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--mc-serif);
    font-size: 1.6rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Boton flotante de accion principal (alcance del pulgar). */
.app-fab {
    position: fixed;
    right: max(1rem, calc((100vw - 720px) / 2 + 1rem));
    bottom: calc(env(safe-area-inset-bottom) + 1.25rem);
    z-index: 1020;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}

.app-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--mc-muted);
}

.app-empty i {
    font-size: 3rem;
    color: var(--mc-primary);
    display: block;
    margin-bottom: .75rem;
}

.badge-pendiente {
    background: var(--mc-accent);
    color: #1a0d05;
    font-weight: 700;
}

.app-serif {
    font-family: var(--mc-serif);
}

/* ---- Barra inferior (solo en escenas "tab") ---------------------------- */
.app-tabbar {
    display: none;
}

body[data-scene="inicio"] .app-tabbar,
body[data-scene="resumen"] .app-tabbar,
body[data-scene="mas"] .app-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: .5rem .5rem calc(env(safe-area-inset-bottom) + .4rem);
    background: var(--mc-surface);
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .10);
}

.app-tabbar button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    border: 0;
    background: transparent;
    color: var(--mc-muted);
    font-size: .8rem;
    font-weight: 600;
    padding: 0;
    min-height: 56px;
}

.app-tabbar .tab-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 34px;
    border-radius: 999px;
    font-size: 1.3rem;
}

.app-tabbar button.activo {
    color: var(--mc-primary);
}

.app-tabbar button.activo .tab-icono {
    background: var(--mc-primary);
    color: var(--mc-primary-text);
}

body[data-scene="inicio"] .app-main,
body[data-scene="resumen"] .app-main,
body[data-scene="mas"] .app-main {
    padding-bottom: calc(env(safe-area-inset-bottom) + 7rem);
}

/* Barra de abajo oculta (se conserva en el HTML): sin ella no hace falta el espacio de abajo. */
body .app-tabbar.app-tabbar-oculta {
    display: none !important;
}

body:has(.app-tabbar-oculta)[data-scene="inicio"] .app-main,
body:has(.app-tabbar-oculta)[data-scene="resumen"] .app-main,
body:has(.app-tabbar-oculta)[data-scene="mas"] .app-main {
    padding-bottom: calc(env(safe-area-inset-bottom) + 2rem);
}

/* En Inicio la portada reemplaza al header. */
body[data-scene="inicio"] .app-header {
    display: none;
}

body[data-scene="inicio"] {
    background: var(--mc-sheet);
}

.toast-marca {
    background: #2b1c14;
    color: #fff;
}

/* ---- Metas: piezas compartidas por lista, detalle y asistente ---- */
.meta-badge {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
}

/* Barra de progreso en el color del area. */
.meta-barra {
    height: 10px;
    border-radius: 999px;
    background: var(--mc-border);
    overflow: hidden;
}

.meta-barra > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width .3s ease;
}

.meta-vencida {
    color: #b42318;
}

[data-bs-theme="dark"] .meta-vencida {
    color: #ff8f84;
}


/* ---- Medico: icono por tipo (lista y formulario) ---- */
.med-icono {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
}

.med-icono svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Aviso sobre la foto de una tarjeta de Inicio (p. ej. "2 por vencer"). */
.tile-alerta {
    position: absolute;
    top: .5rem;
    right: .5rem;
    font-size: .72rem;
    font-weight: 800;
    color: #fff;
    background: #c0362c;
    border-radius: 999px;
    padding: .15rem .55rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

/* Campos de fecha: menos relleno para que quepan en media columna a 360px. */
input[type="date"].form-control {
    padding-left: .6rem;
    padding-right: .4rem;
    font-variant-numeric: tabular-nums;
}

/* ---- Graficas (dataviz): serie azul, estados atencion/urgente, recesivo ---- */
:root,
[data-bs-theme="light"] {
    --viz-serie: #2a78d6;
    --viz-grid: #ebe5de;
    --viz-surface: #ffffff;
}

[data-bs-theme="dark"] {
    --viz-serie: #3987e5;
    --viz-grid: #3a302a;
    --viz-surface: #221b17;
}

:root {
    --viz-atencion: #fab219;
    --viz-urgente: #d03b3b;
}

.viz {
    position: relative;
    user-select: none;
}

.viz svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.viz-grid {
    stroke: var(--viz-grid);
    stroke-width: 1;
}

.viz-eje {
    fill: var(--mc-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.viz-umbral {
    stroke: var(--mc-muted);
    stroke-width: 1;
}

.viz-umbral-txt {
    font-weight: 700;
}

.viz-linea {
    fill: none;
    stroke: var(--viz-serie);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.viz-punto {
    fill: var(--viz-serie);
    stroke: var(--viz-surface);
    stroke-width: 2;
}

.viz-punto.atencion {
    fill: var(--viz-atencion);
}

.viz-punto.urgente {
    fill: var(--viz-urgente);
}

.viz-valor {
    fill: var(--mc-text);
    font-size: 12px;
    font-weight: 700;
}

.viz-guia {
    stroke: var(--mc-muted);
    stroke-width: 1;
}

.viz-tip {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    padding: .35rem .6rem;
    border-radius: .6rem;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    box-shadow: var(--mc-sombra);
    font-size: .8rem;
    line-height: 1.3;
    pointer-events: none;
    white-space: nowrap;
}

.viz-tip strong {
    font-size: 1rem;
    color: var(--mc-text);
}

.viz-tip span {
    color: var(--mc-muted);
}

.viz-tip .viz-tip-estado {
    font-weight: 700;
    color: var(--mc-text);
}

.viz-tip-estado.atencion i {
    color: #b8860b;
}

.viz-tip-estado.urgente i {
    color: var(--viz-urgente);
}

/* Aviso de alerta de signos vitales (icono + etiqueta, nunca solo color). */
.vit-alerta {
    border-radius: 1rem;
    border: 1px solid var(--mc-border);
    border-left: 6px solid var(--viz-atencion);
    background: var(--mc-surface);
    padding: .75rem .9rem;
}

.vit-alerta.urgente {
    border-left-color: var(--viz-urgente);
}

.vit-alerta h3 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 .15rem;
}

.vit-alerta h3 i {
    color: #b8860b;
}

.vit-alerta.urgente h3 i {
    color: var(--viz-urgente);
}

.vit-alerta ul {
    margin: .4rem 0 0;
    padding-left: 1.1rem;
}

.vit-alerta li {
    margin-bottom: .15rem;
}

/* ---- Competencias: balance positivo / negativo (lista y detalle) ---- */
.cp-pos {
    color: #1f7a3a;
}

.cp-neg {
    color: #b42318;
}

[data-bs-theme="dark"] .cp-pos {
    color: #7fd49a;
}

[data-bs-theme="dark"] .cp-neg {
    color: #ff8f84;
}


/* ---- Graficas de columnas (dataviz): categoricos 1 y 2 de la paleta validada ---- */
:root,
[data-bs-theme="light"] {
    --viz-cat1: #2a78d6;
    --viz-cat2: #eb6834;
}

[data-bs-theme="dark"] {
    --viz-cat1: #3987e5;
    --viz-cat2: #d95926;
}

.viz-barra.cat1,
.viz-swatch.cat1,
.viz-key.cat1 {
    fill: var(--viz-cat1);
    background: var(--viz-cat1);
}

.viz-barra.cat2,
.viz-swatch.cat2,
.viz-key.cat2 {
    fill: var(--viz-cat2);
    background: var(--viz-cat2);
}

.viz-base {
    stroke: var(--mc-muted);
    stroke-width: 1;
}

.viz-banda {
    fill: var(--mc-text);
    opacity: .06;
}

.viz-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin-bottom: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--mc-muted);
}

.viz-leyenda span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.viz-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* En el tooltip la serie se identifica con un trazo corto (no una caja). */
.viz-tip-fila {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: var(--mc-muted);
}

.viz-key {
    display: inline-block;
    width: 12px;
    height: 3px;
    border-radius: 2px;
}

.viz-tip .viz-tip-fila strong {
    font-size: .95rem;
}

.viz-tabla {
    margin-top: .5rem;
    font-size: .85rem;
}

.viz-tabla summary {
    cursor: pointer;
    color: var(--mc-muted);
    font-weight: 600;
}

.viz-tabla table {
    width: 100%;
    margin-top: .4rem;
    font-variant-numeric: tabular-nums;
}

.viz-tabla th,
.viz-tabla td {
    padding: .2rem .3rem;
    border-bottom: 1px solid var(--mc-border);
    text-align: right;
}

.viz-tabla th:first-child,
.viz-tabla td:first-child {
    text-align: left;
}

/* ---- Eventos publicos (compartido) ---- */
.ev-card {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    padding: .8rem;
    margin-bottom: .5rem;
    text-align: left;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 1rem;
    color: var(--mc-text);
}

.ev-card.cancelado {
    opacity: .7;
}

.ev-fecha {
    flex: 0 0 52px;
    text-align: center;
    border-radius: .8rem;
    background: var(--mc-bg);
    padding: .35rem 0;
    line-height: 1.05;
}

.ev-fecha strong {
    display: block;
    font-family: var(--mc-serif);
    font-size: 1.4rem;
}

.ev-fecha small {
    font-weight: 700;
    text-transform: uppercase;
    font-size: .72rem;
    color: var(--mc-muted);
}

.ev-texto {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.ev-texto small {
    color: var(--mc-muted);
    overflow-wrap: anywhere;
}

.ev-flecha {
    color: var(--mc-muted);
}

.ev-st {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--mc-text);
}

.ev-st i {
    color: var(--mc-muted);
}

.ev-st-ok i {
    color: #2f8f4e;
}

.ev-st-pend i {
    color: #fab219;
}

.ev-st-no i {
    color: #d03b3b;
}

.ev-fila {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding: .35rem 0;
    border-bottom: 1px solid var(--mc-border);
}

.ev-fila:last-child {
    border-bottom: 0;
}

.ev-fila > span:first-child {
    color: var(--mc-muted);
    font-weight: 600;
}

.ev-fila > span:last-child {
    text-align: right;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ev-texto-largo {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.form-check-input:checked {
    background-color: var(--mc-primary);
    border-color: var(--mc-primary);
}

.form-check-input:focus {
    border-color: var(--mc-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--mc-primary) 25%, transparent);
}

/* ---- Anuncios de patrocinadores (discretos, uno por pantalla) ---- */
.anuncio {
    position: relative;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 1rem;
    overflow: hidden;
    margin: 1rem 0;
    font-size: 1rem;
}

/* Franja baja (3:1) para que el anuncio pese menos que una seccion de la app. */
.anuncio img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    background: var(--mc-bg);
}

.anuncio-cerrar {
    position: absolute;
    top: .25rem;
    right: .25rem;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 12, 6, .6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.anuncio-cuerpo {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .55rem .8rem .65rem;
    min-width: 0;
}

.anuncio-marca {
    color: var(--mc-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.anuncio-texto {
    color: var(--mc-muted);
    font-size: .85rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.anuncio-botones {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .4rem;
}

.anuncio-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--mc-border);
    border-radius: 999px;
    font-weight: 600;
    font-size: .85rem;
    color: var(--mc-text);
    min-height: 36px;
    padding: .2rem .75rem;
}

/* ---- Compraventa (compartido) ---- */
.cv-card {
    display: flex;
    gap: .8rem;
    width: 100%;
    padding: .6rem;
    margin-bottom: .6rem;
    text-align: left;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 1rem;
    color: var(--mc-text);
}

.cv-foto {
    flex: 0 0 104px;
    height: 104px;
    border-radius: .8rem;
    overflow: hidden;
    background: var(--mc-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-muted);
    font-size: 1.6rem;
}

.cv-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cv-texto {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.cv-texto small {
    color: var(--mc-muted);
    overflow-wrap: anywhere;
}

.cv-precio {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ---- Tianguis (compartido) ---- */
.mk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.mk-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    text-align: left;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 1rem;
    overflow: hidden;
    color: var(--mc-text);
    min-width: 0;
}

.mk-foto {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: var(--mc-bg);
    color: var(--mc-muted);
    font-size: 2rem;
}

.mk-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mk-usado {
    position: absolute;
    left: .4rem;
    top: .4rem;
    font-size: .72rem;
    font-weight: 800;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: rgba(20, 12, 6, .7);
    color: #fff;
}

.mk-texto {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .5rem .6rem .6rem;
    min-width: 0;
}

.mk-texto strong {
    font-size: .92rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.mk-texto small {
    color: var(--mc-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mk-precio {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ---- Comunidad (compartido) ---- */
.cm-post {
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 1rem;
    margin-bottom: .9rem;
    overflow: hidden;
}

.cm-cabeza {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .8rem .4rem;
}

.cm-avatar {
    flex: 0 0 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mc-primary);
    color: var(--mc-primary-text);
    font-family: var(--mc-serif);
    font-weight: 700;
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cm-quien {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cm-quien small {
    color: var(--mc-muted);
    overflow-wrap: anywhere;
}

.cm-texto {
    margin: 0;
    padding: .2rem .8rem .6rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.cm-aviso {
    margin: 0 .8rem .5rem;
    padding: .4rem .6rem;
    border-radius: .6rem;
    background: var(--mc-bg);
    font-size: .85rem;
    font-weight: 600;
}

.cm-media video {
    display: block;
    width: 100%;
    max-height: 70vh;
    background: #000;
}

.cm-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--mc-bg);
}

.cm-fotos-1 img {
    max-height: 70vh;
    object-fit: contain;
    background: #000;
}

.cm-fotos-2,
.cm-fotos-3,
.cm-fotos-4 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
}

.cm-fotos-2 a,
.cm-fotos-3 a,
.cm-fotos-4 a {
    aspect-ratio: 1;
}

.cm-fotos-3 a:first-child {
    grid-column: 1 / -1;
    aspect-ratio: 2 / 1;
}

.cm-pie {
    display: flex;
    gap: .3rem;
    padding: .3rem .5rem;
}

.cm-accion {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 44px;
    padding: 0 .7rem;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--mc-text);
    font-weight: 700;
    font-size: 1rem;
}

.cm-accion i {
    font-size: 1.25rem;
}

.cm-accion.activo i {
    color: #d03b3b;
}

.cm-evento {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: calc(100% - 1.6rem);
    margin: 0 .8rem .4rem;
    padding: .25rem .65rem;
    border: 1px solid var(--mc-border);
    border-radius: 999px;
    background: var(--mc-bg);
    color: var(--mc-text);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---- Nombre de la app (lleva a Inicio) y pestañas en computadora (#27) ---- */
.app-marca {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
}

.app-nav {
    display: none;
}

@media (min-width: 768px) {
    .app-nav {
        display: flex;
        gap: .25rem;
        margin: 0 auto;
    }

    .app-nav button {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        min-height: 38px;
        padding: 0 .9rem;
        border: 0;
        border-radius: 999px;
        background: none;
        color: var(--mc-header-text);
        font-weight: 600;
        opacity: .85;
    }

    .app-nav button:hover {
        opacity: 1;
        background: rgba(255, 255, 255, .12);
    }

    .app-nav button.activo {
        opacity: 1;
        background: rgba(255, 255, 255, .2);
    }
}

body[data-scene="login"] .app-nav {
    display: none;
}

/* Filas de filtros que en telefono se deslizan con el dedo: con mouse no se pueden
   deslizar y el ultimo boton quedaba cortado (#32). Ahi se acomodan en varias lineas. */
@media (hover: hover) and (pointer: fine) {
    body .scene-tianguis .tg-cats,
    body .scene-bitacora .bt-tipos,
    body .scene-vitales .vit-metricas,
    body .scene-medico .med-filtro,
    body .scene-contactos .ct-filtro {
        flex-wrap: wrap;
        overflow-x: visible;
    }
}

/* ---- Visor de documentos (#48) ---- */
.visor { position: fixed; inset: 0; z-index: 2000; background: rgba(10, 8, 6, .92); display: flex; flex-direction: column; }
.visor-barra { display: flex; align-items: center; gap: .5rem; padding: calc(env(safe-area-inset-top) + .5rem) .75rem .5rem; color: #fff; }
.visor-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-barra .btn { min-width: 44px; min-height: 44px; }
.visor-cuerpo { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: .5rem; }
.visor-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; background: #fff; }
.visor-img.ampliada { max-width: none; max-height: none; cursor: zoom-out; }
.visor-pdf { width: 100%; height: 100%; border: 0; background: #fff; border-radius: .5rem; }
/* #97 galeria de fotos (pacientes del veterinario y caballos del herrero) */
.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
.galeria figure { position: relative; margin: 0; aspect-ratio: 1; border-radius: .75rem; overflow: hidden; background: var(--mc-bg); border: 1px solid var(--mc-border); }
.galeria .galeria-ver { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.galeria .galeria-sin { display: grid; place-items: center; height: 100%; padding: .3rem; font-size: .75rem; color: var(--mc-muted); text-align: center; }
.galeria .galeria-quitar { position: absolute; top: .25rem; right: .25rem; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }
body.visor-abierto { overflow: hidden; }

/* #59: insignia de clínica / master class */
.ev-clinica {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mc-accent) 25%, transparent);
    color: var(--mc-text);
    font-size: .72rem;
    font-weight: 700;
    vertical-align: middle;
}

/* ---- v0.53 piezas de formulario para gente sin experiencia (formas.js) ---- */
.pregunta { display: block; font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; color: var(--mc-text); }
.pregunta small { font-weight: 500; color: var(--mc-muted); font-size: .85rem; }
.op-grupo { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); }
.op-grupo.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op-grupo.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-grande { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 56px; padding: .5rem .7rem; margin: 0;
    border: 2px solid var(--mc-border); border-radius: 1rem; background: var(--mc-surface); color: var(--mc-text); font-weight: 700; font-size: .98rem;
    text-align: center; line-height: 1.15; cursor: pointer; user-select: none; }
.op-grande small { display: block; font-weight: 500; font-size: .8rem; color: var(--mc-muted); }
.btn-check:checked + .op-grande, .op-grande.activo { background: var(--mc-primary); border-color: var(--mc-primary); color: var(--mc-primary-text); }
.btn-check:checked + .op-grande small, .op-grande.activo small { color: inherit; opacity: .85; }
.btn-check:checked + .op-grande::before, .op-grande.activo::before { content: "\2713"; font-weight: 900; }
.btn-check:focus-visible + .op-grande { outline: 3px solid var(--mc-primary); outline-offset: 2px; }
.op-grande.peligro { border-color: rgba(192, 57, 43, .45); color: var(--viz-urgente, #c0392b); }
.btn-check:checked + .op-grande.peligro { background: var(--viz-urgente, #c0392b); border-color: var(--viz-urgente, #c0392b); color: #fff; }
.op-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.op-chips .op-grande { min-height: 48px; border-radius: 999px; padding: .4rem 1rem; font-size: .92rem; }
.contador { display: flex; align-items: center; gap: .6rem; }
.contador button { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--mc-border); background: var(--mc-surface); color: var(--mc-text); font-size: 1.5rem; line-height: 1; }
.contador input { width: 6rem; text-align: center; font-size: 1.5rem; font-weight: 700; height: 56px; }
.dinero { display: flex; align-items: center; gap: .4rem; }
.dinero span { font-size: 1.6rem; font-weight: 700; color: var(--mc-muted); }
.dinero input { font-size: 1.6rem; font-weight: 700; height: 60px; max-width: 12rem; }
details.mas-datos { border-top: 1px dashed var(--mc-border); margin-top: .8rem; padding-top: .6rem; }
details.mas-datos > summary { list-style: none; cursor: pointer; font-weight: 700; color: var(--mc-primary); min-height: 44px; display: flex; align-items: center; gap: .3rem; }
details.mas-datos > summary::-webkit-details-marker { display: none; }
details.mas-datos > summary::after { content: "\25BE"; transition: transform .2s; }
details.mas-datos[open] > summary::after { transform: rotate(180deg); }
.pie-fijo { position: sticky; bottom: 0; z-index: 6; display: flex; gap: .5rem; padding: .7rem 0 calc(.7rem + env(safe-area-inset-bottom)); margin-top: 1rem;
    background: linear-gradient(180deg, transparent 0, var(--mc-bg, var(--mc-surface)) 30%); }
.pie-fijo .btn { min-height: 56px; font-size: 1.05rem; font-weight: 700; border-radius: 1rem; }
body:has(.app-como) .pie-fijo { bottom: 3.4rem; }
.campo-error input, .campo-error select, .campo-error textarea, input.campo-error { border-color: var(--viz-urgente, #c0392b) !important; }
.campo-error .op-grande { border-color: rgba(192, 57, 43, .6); }
.error-txt { color: var(--viz-urgente, #c0392b); font-weight: 700; font-size: .88rem; margin-top: .3rem; }
.bloque-paso { display: grid; gap: 1.2rem; }
.pasos-puntos { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--mc-muted); font-weight: 600; margin: -.3rem 0 .8rem; }
.pasos-puntos i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--mc-border); display: inline-block; }
.pasos-puntos i.hecho { background: var(--mc-primary); }
.listo { text-align: center; display: grid; gap: .8rem; padding: 1.5rem 0; }
.listo .listo-ico { font-size: 3.2rem; color: #0f8a0f; line-height: 1; }
.listo h2 { font-size: 1.3rem; }
.listo .btn { min-height: 56px; font-weight: 700; border-radius: 1rem; }
.enlace-borrar { display: block; width: 100%; margin: 2rem 0 1rem; min-height: 48px; border: 1px solid rgba(192, 57, 43, .45); border-radius: 1rem; background: none; color: var(--viz-urgente, #c0392b); font-weight: 600; }
/* Herrería y demás negocios de especialista (v0.53) */
.hr-grande { min-height: 56px; font-size: 1.05rem; font-weight: 700; border-radius: 1rem; }
.hr-acciones { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .5rem; margin-bottom: 1rem; }
.hr-h2 { font-size: 1rem; font-weight: 800; margin: .4rem 0 .5rem; }
.hr-h2 small { font-weight: 500; color: var(--mc-muted); font-size: .8rem; }
.hr-filtros { display: flex; flex-wrap: wrap; gap: .4rem; }
.hr-filtros button { min-height: 44px; padding: .35rem 1rem; border: 2px solid var(--mc-border); border-radius: 999px; background: var(--mc-surface); color: var(--mc-text); font-weight: 700; font-size: .9rem; }
.hr-filtros button.activo { background: var(--mc-primary); border-color: var(--mc-primary); color: var(--mc-primary-text); }
.hr-aviso { display: flex; align-items: center; width: 100%; padding: .8rem 1rem; border: 0; border-radius: 1rem; background: rgba(192, 57, 43, .1); color: var(--viz-urgente, #c0392b); font-weight: 700; text-align: left; }

/* v0.60 botón flotante «Inicio» (todos los módulos, en lugar de un encabezado fijo): abajo a la izquierda
   (el + de cada escena va a la derecha); en los tableros sube encima de la acción fija y de la barra. */
.app-ir-inicio {
    position: fixed; z-index: 1025; left: max(.9rem, calc((100vw - 720px) / 2 + .9rem));
    bottom: calc(env(safe-area-inset-bottom) + 1.1rem);
    display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0;
    border: 1.5px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(43, 29, 20, .92); color: var(--mc-gold, #d4a24c);
    font-size: 1.25rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .28); backdrop-filter: blur(4px);
}
.app-ir-inicio:active { transform: scale(.94); }
body:is([data-scene="inicio"], [data-scene="login"]) .app-ir-inicio, body:not([data-scene]) .app-ir-inicio { display: none; }
/* Tablero con barra y acción fija: encima de la acción. Solo barra: encima de la barra. Solo acción: encima de ella. */
body:has(.of-tablero .of-nav:not(.d-none)) .app-ir-inicio { bottom: calc(env(safe-area-inset-bottom) + var(--of-nav-h, 64px) + .8rem); }
body:has(.of-tablero .of-nav:not(.d-none)):has(.of-tablero .of-accion:not(.d-none)) .app-ir-inicio { bottom: calc(env(safe-area-inset-bottom) + var(--of-nav-h, 64px) + 4.6rem); }
body:has(.of-tablero .of-nav.d-none):has(.of-tablero .of-accion:not(.d-none)) .app-ir-inicio { bottom: calc(env(safe-area-inset-bottom) + 5rem); }
/* Formularios con el botón de guardar fijo abajo, el chat y la ficha del directorio: encima de lo suyo. */
body:has(.ch-form) .app-ir-inicio, body:has(.fi-barra:not([hidden])) .app-ir-inicio { bottom: calc(env(safe-area-inset-bottom) + 6rem); }
body:has(.app-como) .app-ir-inicio { margin-bottom: 3.4rem; }
/* Los pies fijos de los formularios dejan a la izquierda el lugar del botón de Inicio (mismo renglón). */
body:has(.app-ir-inicio) .pie-fijo { padding-left: 3.6rem; }
body:is([data-scene="inicio"], [data-scene="login"]) .pie-fijo { padding-left: 0; }