/* v0.56 «Tablero de oficio» (diseño de Roberto) para las herramientas de especialista: Mi herrería,
   Mi consultorio, Mi escuela, Mi cuadra y Mi estudio. Una portada con foto ecuestre y el resumen
   discreto, la hoja crema con lo urgente primero («Atención pendiente»), UNA sola barra de
   navegación abajo y UNA acción principal siempre a la vista, encima de la barra.
   Estructura: section.of-tablero > header.of-hero(.of-top.scene-top, .of-titulo, .of-stats)
               + div.of-hoja(paneles) + div.of-accion + nav.of-nav */
:root { --of-ambar-texto: #85570b; --of-oliva: #5a6b2b; --of-oliva-suave: #e7ead9; --of-ambar: #b7791f; --of-ambar-suave: #fbf0dc; --of-rojo: #b3261e; --of-rojo-suave: #fbe4e1; --of-nav: #2b1d14; --of-nav-h: 64px; }
[data-bs-theme="dark"] { --of-ambar-texto: #e6b35a; --of-oliva: #a8bb72; --of-oliva-suave: #2a3020; --of-ambar: #e6b35a; --of-ambar-suave: #3a2d16; --of-rojo: #f08a80; --of-rojo-suave: #3d1d1a; --of-nav: #120c08; }

/* La portada reemplaza al encabezado de la app (como en Inicio). */
/* v0.57: también Mis caballos (lista y ficha). */
body:is([data-scene="herrero"], [data-scene="veterinario"], [data-scene="alumnos"], [data-scene="ecaballos"], [data-scene="fotografo"], [data-scene="caballos"], [data-scene="caballo"], [data-scene="metas"], [data-scene="meta"], [data-scene="entrenamiento"], [data-scene="jinete"], [data-scene="competencias"], [data-scene="competencia"], [data-scene="contactos"], [data-scene="circuitos"], [data-scene="comunidad"], [data-scene="compraventa"], [data-scene="cvmis"], [data-scene="cvmensajes"], [data-scene="tianguis"], [data-scene="mkmis"], [data-scene="organizador"], [data-scene="patrocinador"]):has(.of-tablero) .app-header { display: none; }
body:is([data-scene="herrero"], [data-scene="veterinario"], [data-scene="alumnos"], [data-scene="ecaballos"], [data-scene="fotografo"], [data-scene="caballos"], [data-scene="caballo"], [data-scene="metas"], [data-scene="meta"], [data-scene="entrenamiento"], [data-scene="jinete"], [data-scene="competencias"], [data-scene="competencia"], [data-scene="contactos"], [data-scene="circuitos"], [data-scene="comunidad"], [data-scene="compraventa"], [data-scene="cvmis"], [data-scene="cvmensajes"], [data-scene="tianguis"], [data-scene="mkmis"], [data-scene="organizador"], [data-scene="patrocinador"]):has(.of-tablero) { background: var(--mc-sheet); }

.of-hero {
    position: relative;
    margin: -1.25rem calc(var(--bs-gutter-x) * -.5) 0;
    padding: calc(env(safe-area-inset-top) + .7rem) 1.1rem 2.7rem;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(10, 7, 4, .58) 0%, rgba(10, 7, 4, .2) 42%, rgba(10, 7, 4, .74) 100%),
        linear-gradient(90deg, rgba(10, 7, 4, .55) 0%, rgba(10, 7, 4, 0) 70%),
        var(--of-foto, none) var(--of-foco, 70% 40%) / cover no-repeat #1b120c;
}
@media (min-width: 721px) { .of-hero { border-radius: 0 0 1.5rem 1.5rem; } }

.of-hero .of-top { display: flex; align-items: center; gap: .55rem; margin: 0 0 1.2rem; }
.of-top .of-volver, .of-top .ay-boton, .of-top .of-menu > .btn {
    flex-shrink: 0; width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.15rem;
    display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.of-top .ay-boton { order: 3; }
.of-marca { order: 2; flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: 1.02rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-marca svg { flex-shrink: 0; width: 26px; height: 26px; fill: var(--mc-gold); }
.of-top .of-volver { order: 1; }
.of-top .of-menu { order: 4; flex-shrink: 0; }

.of-titulo { display: flex; align-items: center; gap: .85rem; }
.of-logo { flex-shrink: 0; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 1.1rem; background: rgba(250, 245, 236, .96); color: var(--mc-primary); font-size: 1.8rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
[data-bs-theme="dark"] .of-logo { background: #f3ebe0; color: #7a2e12; }
.of-logo svg { width: 36px; height: 36px; fill: currentColor; }
.of-titulo h1 { margin: 0; font-family: var(--mc-serif); font-size: 2.15rem; font-weight: 700; line-height: 1.02; text-shadow: 0 2px 12px rgba(0, 0, 0, .4); }
.of-titulo p { margin: .25rem 0 0; font-size: .9rem; color: rgba(255, 255, 255, .9); line-height: 1.3; }

/* Resumen discreto: pastillas en una linea (se tocan). */
.of-stats { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.of-stats button {
    display: inline-flex; align-items: center; gap: .35rem; min-height: 36px; padding: .3rem .8rem;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff;
    font-size: .84rem; font-weight: 600; backdrop-filter: blur(4px);
}
.of-stats button strong { font-weight: 800; }
.of-stats button svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }
.of-stats button.atencion { border-color: rgba(255, 196, 120, .7); background: rgba(183, 121, 31, .35); }
.of-stats button.of-dinero strong { color: var(--mc-gold); }

/* Hoja crema montada sobre la portada; deja espacio abajo para la accion y la barra. */
.of-hoja {
    position: relative;
    margin: -1.4rem calc(var(--bs-gutter-x) * -.5) 0;
    padding: 1.15rem .9rem calc(var(--of-nav-h) + 9.4rem + env(safe-area-inset-bottom));   /* v0.60: + el botón flotante de Inicio */
    min-height: 55vh;
    background: var(--mc-sheet);
    border-radius: 1.5rem 1.5rem 0 0;
}
@media (min-width: 721px) { .of-hoja { margin-left: 0; margin-right: 0; } }

/* Secciones */
.of-sec { margin-bottom: 1.4rem; }
.of-sec-tit { display: flex; align-items: center; gap: .5rem; margin: 0 0 .6rem; font-size: 1.06rem; font-weight: 800; }
.of-sec-tit .bi { font-size: 1.15rem; color: var(--mc-primary); }
.of-sec-tit small { font-weight: 500; font-size: .8rem; color: var(--mc-muted); }
.of-sec-tit .of-mas { margin-left: auto; border: 0; background: none; padding: 0; color: var(--mc-primary); font-size: .85rem; font-weight: 600; white-space: nowrap; }

/* Tarjeta de trabajo (lo pendiente, lo de hoy, lo proximo): avatar, datos y acciones del momento. */
.of-tarjeta {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem .8rem; align-items: start;
    padding: .85rem .9rem; margin-bottom: .55rem; border-radius: 1.1rem; background: var(--mc-surface);
    box-shadow: 0 4px 14px rgba(60, 35, 15, .08); border-left: 4px solid transparent;
}
.of-tarjeta.rojo { border-left-color: var(--of-rojo); }
.of-tarjeta.ambar { border-left-color: var(--of-ambar); }
.of-tarjeta.oliva { border-left-color: var(--of-oliva); }
.of-tarjeta .of-avatar { grid-row: span 2; }
.of-avatar { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mc-primary); color: var(--mc-primary-text); font-weight: 800; font-size: 1.2rem; background-size: cover; background-position: center; flex-shrink: 0; }
.of-avatar.con-foto { color: transparent; }
/* v0.57: foto como <img> encima de la inicial (si no carga, se ve la inicial). */
.of-avatar { position: relative; overflow: hidden; }
.of-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Icono del aviso en lugar de foto (ficha del caballo). */
.of-avatar.of-ico { border-radius: .95rem; background: var(--of-rojo-suave); color: var(--of-rojo); font-size: 1.35rem; }
.of-avatar.of-ico.ambar { background: var(--of-ambar-suave); color: var(--of-ambar); }
.of-avatar.of-ico.oliva { background: var(--of-oliva-suave); color: var(--of-oliva); }
.of-avatar.of-ico svg { width: 26px; height: 26px; fill: currentColor; }
.of-fecha { display: grid; place-items: center; width: 52px; padding: .35rem 0; border-radius: .8rem; background: var(--mc-sheet); line-height: 1.05; text-align: center; }
.of-fecha b { font-size: 1.25rem; }
.of-fecha span { font-size: .68rem; text-transform: uppercase; color: var(--mc-muted); font-weight: 700; }
.of-datos { min-width: 0; }
.of-datos strong { display: block; font-size: 1.02rem; line-height: 1.2; }
.of-datos small { display: block; color: var(--mc-muted); font-size: .84rem; line-height: 1.3; overflow-wrap: anywhere; }
.of-datos .of-cuando { color: var(--of-rojo); font-weight: 600; }
.of-datos .of-cuando.ambar { color: var(--of-ambar-texto); }
.of-tag { display: inline-block; margin-bottom: .2rem; padding: .1rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.of-tag.rojo { background: var(--of-rojo-suave); color: var(--of-rojo); }
.of-tag.ambar { background: var(--of-ambar-suave); color: var(--of-ambar-texto); }
.of-tag.oliva { background: var(--of-oliva-suave); color: var(--of-oliva); }
.of-acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .45rem; }
.of-acciones .btn { min-height: 42px; padding: .3rem .8rem; font-size: .92rem; font-weight: 700; border-radius: .8rem; }
.of-acciones .btn-primary { flex: 1 1 auto; }
.of-acciones .of-wa { width: 42px; padding: 0; color: #1f8f4d; border: 1px solid var(--mc-border); background: var(--mc-surface); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.of-tarjeta .of-abrir { position: absolute; inset: 0 0 auto 0; height: 0; }

/* Todo al dia */
.of-bien { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border-radius: 1.1rem; background: var(--of-oliva-suave); color: var(--of-oliva); font-weight: 700; }
.of-bien .bi { font-size: 1.4rem; }

/* Vacio con dibujo discreto */
.of-vacio { position: relative; overflow: hidden; display: flex; align-items: center; gap: .8rem; min-height: 96px; padding: 1rem; border: 1.5px dashed var(--mc-border); border-radius: 1.1rem; color: var(--mc-muted); }
.of-vacio strong { display: block; color: var(--mc-text); }
.of-vacio .of-vacio-ico { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: .8rem; background: var(--of-ambar-suave); color: var(--of-ambar); font-size: 1.3rem; }
.of-vacio .of-dibujo { position: absolute; right: -.4rem; bottom: -1rem; font-size: 5.5rem; opacity: .1; pointer-events: none; }
.of-vacio > div { position: relative; min-width: 0; }

/* Accion principal fija encima de la barra (y la secundaria como boton chico). */
.of-accion {
    position: fixed; z-index: 1031; left: 0; right: 0; bottom: calc(var(--of-nav-h) + env(safe-area-inset-bottom) + .6rem);
    display: flex; gap: .5rem; max-width: 720px; margin: 0 auto; padding: 0 .9rem; pointer-events: none;
}
.of-accion .btn { pointer-events: auto; min-height: 56px; border-radius: 1rem; font-weight: 800; font-size: 1.05rem; box-shadow: 0 8px 22px rgba(60, 30, 10, .3); }
.of-accion .of-principal { flex: 1; min-width: 0; white-space: nowrap; font-size: 1rem; }
.of-accion .of-secundaria { flex-shrink: 0; background: var(--mc-surface); color: var(--mc-primary); border: 2px solid var(--mc-primary); font-size: .9rem; padding: 0 .75rem; white-space: nowrap; }
.of-accion.d-none { display: none; }

/* UNA sola barra de navegacion, abajo (comoda con una mano). */
.of-nav {
    position: fixed; z-index: 1030; left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: repeat(var(--of-tabs, 5), minmax(0, 1fr));
    max-width: 720px; margin: 0 auto; padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom));
    background: var(--of-nav); border-radius: 1.3rem 1.3rem 0 0; box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
}
.of-nav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem; min-height: 56px; padding: .1rem 1px; border: 0; background: none; color: rgba(255, 255, 255, .62); font-size: .74rem; font-weight: 600; min-width: 0; }
.of-nav button .bi { font-size: 1.3rem; }
.of-nav button > span:not(.of-nav-n) { max-width: 100%; padding: 0 .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.of-nav[style*="--of-tabs: 5"] button { font-size: .69rem; letter-spacing: -.02em; }
.of-nav button.activo { color: var(--mc-gold); }
.of-nav button.activo::after { content: ""; position: absolute; bottom: 2px; width: 28px; height: 3px; border-radius: 3px; background: var(--mc-gold); }
.of-nav .of-nav-n { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #e5392b; color: #fff; font-size: .64rem; font-weight: 800; line-height: 17px; }

/* Con la franja de «Viendo como…» del admin, todo sube. */
body:has(.app-como) .of-nav { bottom: 3.4rem; }
body:has(.app-como) .of-accion { bottom: calc(var(--of-nav-h) + 3.4rem + .6rem); }

/* Dos etiquetas en la misma tarjeta. */
.of-tag + .of-tag { margin-left: .3rem; }
/* Los avisos (appAlert) suben por encima de la accion fija y la barra. */
body:has(.of-tablero) .app-toasts { padding-bottom: calc(env(safe-area-inset-bottom) + var(--of-nav-h) + 5.2rem) !important; }

/* v0.57 sin barra (alta de un caballo, lista vacia): la accion baja a su lugar. */
.of-tablero:has(.of-nav.d-none) .of-accion { bottom: calc(env(safe-area-inset-bottom) + .8rem); }
body:has(.app-como) .of-tablero:has(.of-nav.d-none) .of-accion { bottom: 4.2rem; }

/* v0.57 hoja de opciones desde abajo (appOficioElegir en formas.js). */
.of-sheet { position: fixed; inset: 0; z-index: 1060; display: flex; align-items: flex-end; justify-content: center; }
.of-sheet-fondo { position: absolute; inset: 0; background: rgba(20, 12, 6, .5); animation: of-aparece .15s ease-out; }
.of-sheet-caja {
    position: relative; width: 100%; max-width: 720px; max-height: 82vh; overflow-y: auto;
    padding: .9rem .9rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 1.4rem 1.4rem 0 0;
    background: var(--mc-sheet); color: var(--mc-text); box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); animation: of-sube .2s ease-out;
}
.of-sheet-cabeza { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .7rem .2rem; }
.of-sheet-cabeza strong { font-family: var(--mc-serif); font-size: 1.35rem; line-height: 1.15; }
.of-sheet-x { flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--mc-surface); color: var(--mc-text); font-size: 1.1rem; }
.of-sheet-ops { display: grid; gap: .5rem; }
.of-sheet-op {
    display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 64px; padding: .65rem .85rem; text-align: left;
    border: 0; border-radius: 1.1rem; background: var(--mc-surface); color: var(--mc-text); box-shadow: 0 4px 14px rgba(60, 35, 15, .08);
}
.of-sheet-op:active { transform: scale(.99); }
.of-sheet-op > .bi-chevron-right { color: var(--mc-muted); flex-shrink: 0; }
.of-sheet-ico { position: relative; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: .9rem; background: var(--of-ambar-suave); color: var(--mc-primary); font-size: 1.35rem; }
.of-sheet-ico svg { width: 26px; height: 26px; fill: currentColor; }
.of-sheet-ico.foto { border-radius: 50%; background: var(--mc-primary); color: var(--mc-primary-text); font-weight: 800; font-size: 1.15rem; }
.of-sheet-ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.of-sheet-txt { flex: 1; min-width: 0; }
.of-sheet-txt strong { display: block; font-size: 1.02rem; line-height: 1.2; }
.of-sheet-txt small { display: block; color: var(--mc-muted); font-size: .84rem; line-height: 1.3; }
@keyframes of-sube { from { transform: translateY(24%); } to { transform: none; } }
@keyframes of-aparece { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .of-sheet-caja, .of-sheet-fondo { animation: none; } }

/* v0.61 subsecciones (appSubescena en subescena.js): la barra de siempre (volver + título + acciones) montada en
   una portada compacta con la foto de su sección, y el contenido en la hoja crema. */
body:has(#sceneContainer > .of-sub) .app-header { display: none; }
body:has(#sceneContainer > .of-sub) { background: var(--mc-sheet); }
.of-hero.of-mini {
    padding: calc(env(safe-area-inset-top) + .7rem) 1rem 3.4rem;
    /* Más clara que la portada grande: aquí solo va el título y se debe ver la foto. */
    background: linear-gradient(180deg, rgba(10, 7, 4, .55) 0%, rgba(10, 7, 4, .25) 55%, rgba(10, 7, 4, .55) 100%),
        var(--of-foto, none) var(--of-foco, 60% 40%) / cover no-repeat #1b120c;
}
.of-mini .scene-top { margin: 0; gap: .55rem; min-height: 46px; }
.of-mini .scene-top h1 {
    color: #fff; font-size: 1.55rem; line-height: 1.12; text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.of-mini .scene-top > .btn-icon, .of-mini .scene-top > .dropdown > .btn, .of-mini .scene-top > a.btn-icon, .of-mini .scene-top > .ms-auto.btn-icon {
    flex-shrink: 0; width: 42px; height: 42px; min-height: 42px; padding: 0; border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.15rem;
    display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}
.of-mini .scene-top > .btn-icon.text-danger { color: #ffc2bb !important; border-color: rgba(255, 194, 187, .7); }
.of-mini .scene-top select, .of-mini .scene-top .form-select { max-width: 45%; }
.of-sub > .of-hoja { min-height: 60vh; padding-bottom: calc(6.5rem + env(safe-area-inset-bottom)); }
.of-sub .of-hoja .card { border: 0; border-radius: 1.1rem; box-shadow: 0 4px 14px rgba(60, 35, 15, .08); }
/* El botón principal del formulario se queda a la vista mientras se llena (como .pie-fijo). */
.of-sub-guardar { position: sticky; bottom: calc(env(safe-area-inset-bottom) + .8rem); z-index: 6; }
button.of-sub-guardar, .of-sub-guardar > button[type="submit"] { min-height: 56px; border-radius: 1rem; font-weight: 800; font-size: 1.05rem; box-shadow: 0 8px 22px rgba(60, 30, 10, .3); }
/* El botón de Inicio va a su izquierda, en el mismo renglón: nunca se enciman, esté pegado abajo o no. */
button.of-sub-guardar { margin-left: 3.6rem; width: calc(100% - 3.6rem) !important; }
div.of-sub-guardar { padding-left: 3.6rem; margin-left: 0; margin-right: 0; }
div.of-sub-guardar > .btn { min-height: 56px; border-radius: 1rem; font-weight: 800; box-shadow: 0 8px 22px rgba(60, 30, 10, .22); }
body:has(.app-como) .of-sub-guardar { bottom: 4.2rem; }
@media print {
    .of-sub > .of-hero { display: none !important; }
    .of-sub > .of-hoja { margin: 0; padding: 0; min-height: 0; background: none; border-radius: 0; }
    body:has(#sceneContainer > .of-sub) { background: #fff; }
}