/* Estilos base de la aplicación.
   El diseño completo (modo claro/oscuro, componentes) se desarrolla en la fase
   de Frontend. Este archivo solo confirma la carga de assets en la Fase 0. */

:root {
    --re-brand: #0d6efd;
    /* Paleta oscura/dorada compartida por el navbar, el widget de agenda y
       los paneles "oscuros" del panel de inicio (Notificaciones, Mis mesas). */
    --agenda-bg-a: #1a2036;
    --agenda-bg-b: #222a45;
    --agenda-gold: #c9a45c;
    --agenda-text: #e7e2d3;
    --agenda-muted: #8892a8;
}

body {
    min-height: 100vh;
}

/* =============================================================================
   Reskin global: el "primary" de Bootstrap (azul, #0d6efd) pasa a dorado en
   TODA la página — botones, enlaces, foco de formularios, checks, paginación,
   ítems activos de menú — no solo en los paneles ya rediseñados. Bootstrap 5.3
   define estos valores como propiedades CSS por componente (--bs-btn-bg, etc.),
   así que re-declararlas aquí (cargado después de bootstrap.min.css) los
   sobrescribe sin tener que tocar cada vista una por una.
   ============================================================================= */
.btn-primary {
    --bs-btn-color: #1a2036;
    --bs-btn-bg: #c9a45c;
    --bs-btn-border-color: #c9a45c;
    --bs-btn-hover-color: #1a2036;
    --bs-btn-hover-bg: #d4b374;
    --bs-btn-hover-border-color: #d4b374;
    --bs-btn-focus-shadow-rgb: 201, 164, 92;
    --bs-btn-active-color: #1a2036;
    --bs-btn-active-bg: #b8923f;
    --bs-btn-active-border-color: #b8923f;
    --bs-btn-disabled-color: #1a2036;
    --bs-btn-disabled-bg: #c9a45c;
    --bs-btn-disabled-border-color: #c9a45c;
}

.btn-outline-primary {
    --bs-btn-color: #c9a45c;
    --bs-btn-border-color: #c9a45c;
    --bs-btn-hover-color: #1a2036;
    --bs-btn-hover-bg: #c9a45c;
    --bs-btn-hover-border-color: #c9a45c;
    --bs-btn-focus-shadow-rgb: 201, 164, 92;
    --bs-btn-active-color: #1a2036;
    --bs-btn-active-bg: #c9a45c;
    --bs-btn-active-border-color: #c9a45c;
    --bs-btn-disabled-color: #c9a45c;
    --bs-btn-disabled-border-color: #c9a45c;
}

a {
    --bs-link-color-rgb: 180, 138, 66;
    --bs-link-hover-color-rgb: 160, 121, 56;
}

.text-primary {
    color: #c9a45c !important;
}

.text-bg-primary {
    color: #1a2036 !important;
    background-color: #c9a45c !important;
}

.form-control:focus,
.form-select:focus {
    border-color: #c9a45c;
    box-shadow: 0 0 0 .25rem rgba(201, 164, 92, .25);
}

.form-check-input:checked {
    background-color: #c9a45c;
    border-color: #c9a45c;
}

.form-check-input:focus {
    border-color: #c9a45c;
    box-shadow: 0 0 0 .25rem rgba(201, 164, 92, .25);
}

.page-link {
    color: #b48a42;
}

.page-item.active .page-link {
    background-color: #c9a45c;
    border-color: #c9a45c;
    color: #1a2036;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #c9a45c;
    color: #1a2036;
}

/* ===== Botón "dorado" (acciones destacadas fuera de los paneles oscuros) ===== */
.btn-gold {
    background: var(--agenda-gold);
    border-color: var(--agenda-gold);
    color: var(--agenda-bg-a);
    font-weight: 600;
}

.btn-gold:hover,
.btn-gold:focus {
    background: var(--agenda-gold);
    border-color: var(--agenda-gold);
    color: var(--agenda-bg-a);
    filter: brightness(1.1);
}

.btn-gold:active {
    filter: brightness(0.95);
}

.btn-outline-gold {
    border: 1px solid var(--agenda-gold);
    color: var(--agenda-gold);
    background: transparent;
    font-weight: 600;
}

.btn-outline-gold:hover,
.btn-outline-gold:focus {
    background: var(--agenda-gold);
    border-color: var(--agenda-gold);
    color: var(--agenda-bg-a);
}

/* ===== Ícono de marca (agenda/calendario junto al nombre) ===== */
.brand-icon {
    color: var(--agenda-gold);
}

/* ===== Menú móvil (offcanvas) ===== */
.mobile-nav-list .nav-link {
    color: #cbd3e1;
    border-radius: .5rem;
    padding: .5rem .75rem;
}

.mobile-nav-list .nav-link:hover,
.mobile-nav-list .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

/* ===== Barra de navegación (mismo estilo oscuro/dorado que el calendario) ===== */
.navbar-dark-gold {
    background: linear-gradient(180deg, var(--agenda-bg-a), var(--agenda-bg-b)) !important;
    border-bottom: 1px solid rgba(201, 164, 92, .3) !important;
}

.navbar-dark-gold .navbar-brand {
    font-family: 'Cinzel Decorative', serif;
    color: var(--agenda-gold) !important;
    font-size: 1.05rem;
}

.navbar-dark-gold .nav-link {
    color: var(--agenda-text) !important;
}

.navbar-dark-gold .nav-link:hover,
.navbar-dark-gold .nav-link.active {
    color: var(--agenda-gold) !important;
}

.navbar-dark-gold .btn-outline-secondary {
    border-color: rgba(201, 164, 92, .4);
    color: var(--agenda-gold);
    background: transparent;
}

.navbar-dark-gold .btn-outline-secondary:hover {
    background: rgba(201, 164, 92, .15);
    color: #fff;
    border-color: rgba(201, 164, 92, .6);
}

.navbar-dark-gold .form-control {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(201, 164, 92, .3);
    color: var(--agenda-text);
}

.navbar-dark-gold .form-control::placeholder {
    color: var(--agenda-muted);
}

.navbar-dark-gold .form-control:focus {
    background: rgba(255, 255, 255, .12);
    border-color: var(--agenda-gold);
    color: var(--agenda-text);
    box-shadow: none;
}

.navbar-dark-gold .btn-light {
    background: rgba(255, 255, 255, .1);
    color: var(--agenda-text);
    border: 1px solid rgba(201, 164, 92, .3);
}

.navbar-dark-gold .btn-light:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* ===== Paneles oscuros del panel de inicio (Notificaciones, Mis mesas) ===== */
.dark-panel {
    background: linear-gradient(180deg, var(--agenda-bg-a), var(--agenda-bg-b));
    border-color: rgba(201, 164, 92, .3);
    color: var(--agenda-text);
    --bs-card-cap-bg: transparent;
    --bs-card-border-color: rgba(201, 164, 92, .3);
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--agenda-text);
    --bs-list-group-border-color: rgba(201, 164, 92, .15);
    --bs-list-group-action-hover-bg: rgba(201, 164, 92, .12);
    --bs-list-group-action-hover-color: #fff;
    --bs-list-group-active-bg: rgba(201, 164, 92, .22);
    --bs-list-group-active-border-color: rgba(201, 164, 92, .4);
}

.dark-panel .card-header {
    font-family: 'Cinzel Decorative', serif;
    font-size: .82rem;
    letter-spacing: .02em;
    color: var(--agenda-gold);
    border-bottom-color: rgba(201, 164, 92, .3);
}

.dark-panel a:not(.btn) {
    color: var(--agenda-gold);
}

.dark-panel .text-secondary {
    color: var(--agenda-muted) !important;
}

.dark-panel .fw-semibold {
    color: var(--agenda-text);
}

/* ===== Widget de agenda / calendario ===== */
.agenda-widget {
    background: linear-gradient(180deg, var(--agenda-bg-a), var(--agenda-bg-b));
    border: 1px solid rgba(201, 164, 92, .3);
    border-radius: .6rem;
    padding: .65rem;
    color: var(--agenda-text);
}

.agenda-widget__title {
    font-family: 'Cinzel Decorative', serif;
    color: var(--agenda-gold);
    font-size: .8rem;
    text-align: center;
    margin-bottom: .5rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid rgba(201, 164, 92, .3);
}

.agenda-widget__list {
    list-style: none;
    padding: 0;
    margin: 0 0 .6rem;
}

.agenda-widget__list li {
    font-size: .72rem;
    margin-bottom: .3rem;
}

.agenda-widget__item-mesa {
    color: var(--agenda-gold);
    font-style: italic;
}

.agenda-widget__list time {
    color: var(--agenda-gold);
    font-weight: 600;
    margin-right: .4rem;
}

.agenda-widget__empty {
    font-size: .7rem;
    color: var(--agenda-muted);
    text-align: center;
}

.agenda-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .15rem;
}

.agenda-calendar__today-btn {
    display: block;
    margin: 0 0 .4rem auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--agenda-gold);
    font-size: .62rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.agenda-calendar__today-btn:hover {
    color: #fff;
}

.agenda-calendar__nav {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--agenda-gold);
    background: transparent;
    color: var(--agenda-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    line-height: 1;
}

.agenda-calendar__nav:hover {
    background: var(--agenda-gold);
    color: var(--agenda-bg-a);
}

.agenda-calendar__month {
    font-family: 'Cinzel Decorative', serif;
    color: var(--agenda-gold);
    font-size: .72rem;
}

.agenda-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.agenda-calendar__weekday {
    font-size: .58rem;
    font-weight: 600;
    color: var(--agenda-gold);
    padding-bottom: .2rem;
}

.agenda-calendar__day {
    font-size: .64rem;
    padding: .2rem 0;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--agenda-text);
    aspect-ratio: 1 / 1;
}

.agenda-calendar__day:hover {
    background: rgba(201, 164, 92, .18);
}

.agenda-calendar__day--today {
    background: var(--agenda-gold);
    color: var(--agenda-bg-a);
    font-weight: 700;
}

.agenda-calendar__day--selected {
    border-color: #fff;
}

.agenda-calendar__day--empty {
    visibility: hidden;
    pointer-events: none;
}

.agenda-calendar__day {
    position: relative;
}

.agenda-calendar__day--has-events::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--agenda-gold);
    transform: translateX(-50%);
}

.agenda-calendar__day--today.agenda-calendar__day--has-events::after {
    background: var(--agenda-bg-a);
}

.agenda-calendar__add-btn {
    width: 100%;
    margin-top: .5rem;
    padding: .25rem;
    border: 1px dashed rgba(201, 164, 92, .5);
    border-radius: .4rem;
    background: transparent;
    color: var(--agenda-gold);
    font-size: .68rem;
}

.agenda-calendar__add-btn:hover {
    background: rgba(201, 164, 92, .12);
}

.agenda-widget__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.agenda-widget__list li .agenda-widget__item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agenda-widget__item-remove {
    border: 0;
    background: transparent;
    color: var(--agenda-muted);
    font-size: .7rem;
    line-height: 1;
    padding: 0 .15rem;
    flex-shrink: 0;
}

.agenda-widget__item-remove:hover {
    color: #e5675f;
}

.agenda-widget__form {
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(201, 164, 92, .3);
    border-radius: .4rem;
    padding: .5rem;
    margin-bottom: .5rem;
}

.agenda-widget__form-date {
    font-size: .68rem;
    color: var(--agenda-gold);
    margin-bottom: .3rem;
    font-weight: 600;
}

.agenda-widget__input {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .15);
    color: var(--agenda-text);
    font-size: .78rem;
}

.agenda-widget__input:focus {
    background: rgba(255, 255, 255, .1);
    border-color: var(--agenda-gold);
    color: var(--agenda-text);
    box-shadow: none;
}

.agenda-widget__submit {
    background: var(--agenda-gold);
    border: 1px solid var(--agenda-gold);
    color: var(--agenda-bg-a);
    font-weight: 600;
    font-size: .75rem;
}

.agenda-widget__submit:hover {
    filter: brightness(1.08);
    color: var(--agenda-bg-a);
}

.agenda-widget__cancel {
    border: 1px solid rgba(255, 255, 255, .2);
    color: var(--agenda-text);
    background: transparent;
    font-size: .75rem;
}

/* ===== Listado "Novedades y aportes" (publicaciones de mis mesas) ===== */
.posts-feed__title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.3rem;
    color: #8a6a2f;
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(138, 106, 47, .25);
}

.posts-feed__composer {
    background: #fff;
    color: #212529;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .6rem;
    padding: .85rem;
    margin-bottom: 1.25rem;
}

/* La tarjeta del compositor es siempre clara por diseño; sin esto, el
   textarea heredaba el fondo/texto oscuro del modo oscuro de Bootstrap y
   quedaba como un "hueco" oscuro dentro de la tarjeta blanca. */
.posts-feed__composer .rte-editor {
    background: #fff;
    color: #212529;
}

.posts-feed__composer textarea {
    resize: none;
}

.posts-feed__item {
    background: #fff;
    color: #212529;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .6rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.posts-feed__item--status {
    border-left: 3px solid #c9a45c;
    background: #fffdf8;
}

.posts-feed__header {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem;
}

.posts-feed__author {
    flex-grow: 1;
    min-width: 0;
}

.posts-feed__mesa {
    color: #8a6a2f;
}

.posts-feed__time {
    white-space: nowrap;
}

.posts-feed__post-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: 1rem;
    margin-bottom: .4rem;
}

.posts-feed__post-title a {
    color: inherit;
    text-decoration: none;
}

.posts-feed__post-title a:hover {
    text-decoration: underline;
}

.posts-feed__excerpt {
    font-size: .9rem;
    color: #495057;
    margin-bottom: .5rem;
}

/* ===== Editor de texto enriquecido (estados y artículos) ===== */
.rte-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin-bottom: .35rem;
}

.rte-toolbar__sep {
    width: 1px;
    height: 20px;
    background: rgba(0, 0, 0, .12);
    margin: 0 .15rem;
}

.rte-btn {
    width: 30px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .35rem;
    background: #fff;
    color: #495057;
    font-size: .85rem;
}

.rte-btn:hover {
    background: #f1f1f1;
}

.rte-btn.active {
    background: #c9a45c;
    border-color: #c9a45c;
    color: #fff;
}

.rte-editor {
    min-height: 56px;
    max-height: 240px;
    overflow-y: auto;
}

.rte-editor--lg {
    min-height: 280px;
    max-height: none;
}

.rte-editor:empty::before {
    content: attr(data-placeholder);
    color: #6c757d;
}

.rte-content p,
.rte-content div {
    margin: 0 0 .75rem;
}

.rte-content ul,
.rte-content ol {
    margin: 0 0 .75rem;
    padding-left: 1.25rem;
}

.rte-editor p,
.rte-editor div {
    margin: 0 0 .5rem;
}

.rte-content h2,
.rte-editor h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 1rem 0 .5rem;
}

.rte-content h3,
.rte-editor h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: .9rem 0 .4rem;
}

.rte-content blockquote,
.rte-editor blockquote {
    margin: .5rem 0;
    padding: .4rem .9rem;
    border-left: 3px solid #c9a45c;
    color: #6c757d;
    font-style: italic;
}

.rte-content a,
.rte-editor a {
    color: #0d6efd;
}

.rte-content img,
.rte-editor img {
    max-width: 100%;
    height: auto;
    border-radius: .4rem;
    margin: .5rem 0;
    display: block;
}

.posts-feed__actions {
    display: flex;
    gap: 1rem;
    font-size: .82rem;
    margin-bottom: .25rem;
}

.posts-feed__actions a {
    color: #c9a45c;
    font-weight: 600;
    text-decoration: none;
}

.posts-feed__actions a:hover {
    text-decoration: underline;
}

.posts-feed__comments {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.posts-feed__comment {
    display: flex;
    gap: .5rem;
    background: #f7f2e7;
    color: #212529;
    border-radius: .5rem;
    padding: .5rem .6rem;
}

.posts-feed__comment-meta {
    font-size: .78rem;
}

.posts-feed__comment-text {
    font-size: .85rem;
    margin: .15rem 0 0;
}

.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #c9a45c;
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
}

.avatar-initials--sm {
    width: 26px;
    height: 26px;
    font-size: .68rem;
}

/* ===== Chat flotante del panel de inicio ===== */
.friend-chat,
.friend-chat__launcher {
    position: fixed;
    right: 20px;
    bottom: 0;
    z-index: 1050;
}

.friend-chat {
    width: 300px;
    max-width: calc(100vw - 40px);
    background: linear-gradient(180deg, var(--agenda-bg-a), var(--agenda-bg-b));
    border: 1px solid rgba(201, 164, 92, .3);
    border-bottom: 0;
    border-radius: .6rem .6rem 0 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--agenda-text);
}

.friend-chat__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .55rem .75rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(201, 164, 92, .25);
    flex-shrink: 0;
}

.friend-chat__title {
    font-family: 'Cinzel Decorative', serif;
    color: var(--agenda-gold);
    font-size: .85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-chat__header-actions {
    display: flex;
    gap: .1rem;
    flex-shrink: 0;
}

.friend-chat__icon-btn {
    background: none;
    border: 0;
    color: var(--agenda-text);
    font-size: .95rem;
    line-height: 1;
    padding: .1rem .35rem;
    cursor: pointer;
}

.friend-chat__icon-btn:hover {
    color: var(--agenda-gold);
}

.friend-chat.min .friend-chat__contacts,
.friend-chat.min .friend-chat__conversation {
    display: none;
}

.friend-chat__search {
    display: block;
    width: calc(100% - 1rem);
    margin: .6rem .5rem .3rem;
    padding: .3rem .5rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(201, 164, 92, .3);
    border-radius: .4rem;
    color: var(--agenda-text);
    font-size: .82rem;
}

.friend-chat__search::placeholder {
    color: var(--agenda-muted);
}

.friend-chat__list {
    list-style: none;
    margin: 0;
    padding: 0 0 .5rem;
    max-height: 260px;
    overflow-y: auto;
}

.friend-chat__contact {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem;
    cursor: pointer;
    font-size: .85rem;
}

.friend-chat__contact:hover {
    background: rgba(201, 164, 92, .12);
}

.friend-chat__contact-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-chat__empty {
    padding: .75rem;
    margin: 0;
    font-size: .8rem;
    color: var(--agenda-muted);
    text-align: center;
}

.friend-chat__empty a {
    color: var(--agenda-gold);
}

.friend-chat__body {
    height: 300px;
    overflow-y: auto;
    padding: .5rem .75rem;
    background: rgba(0, 0, 0, .12);
}

.friend-chat__footer {
    display: flex;
    gap: .4rem;
    padding: .5rem;
    border-top: 1px solid rgba(201, 164, 92, .25);
    flex-shrink: 0;
}

.friend-chat__input {
    flex-grow: 1;
    min-width: 0;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(201, 164, 92, .3);
    border-radius: .4rem;
    color: var(--agenda-text);
    padding: .35rem .6rem;
    font-size: .85rem;
}

.friend-chat__input::placeholder {
    color: var(--agenda-muted);
}

.friend-chat__send {
    flex-shrink: 0;
    background: var(--agenda-gold);
    border: 1px solid var(--agenda-gold);
    color: var(--agenda-bg-a);
    font-weight: 600;
    border-radius: .4rem;
    padding: .35rem .8rem;
    font-size: .82rem;
}

.friend-chat__msg {
    margin-bottom: .5rem;
    display: flex;
}

.friend-chat__msg.mine {
    justify-content: flex-end;
}

.friend-chat__bubble {
    max-width: 80%;
    padding: .35rem .6rem;
    border-radius: .75rem;
    font-size: .82rem;
    word-break: break-word;
}

.friend-chat__bubble.other {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(201, 164, 92, .2);
}

.friend-chat__bubble.mine {
    background: var(--agenda-gold);
    color: var(--agenda-bg-a);
}

.friend-chat__author {
    font-size: .68rem;
    font-weight: 600;
    opacity: .8;
    margin-bottom: .1rem;
}

.friend-chat__launcher {
    border: 1px solid rgba(201, 164, 92, .4);
    border-radius: 2rem;
    background: linear-gradient(180deg, var(--agenda-bg-a), var(--agenda-bg-b));
    color: var(--agenda-gold);
    padding: .5rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}

.friend-chat__launcher:hover {
    filter: brightness(1.1);
}

/* ===== Página de inicio (invitados): hero + funciones destacadas ===== */
.home-hero {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: linear-gradient(135deg, var(--agenda-bg-a), var(--agenda-bg-b));
    border: 1px solid rgba(201, 164, 92, .3);
    border-radius: 1rem;
    padding: 3rem 2.5rem;
    margin-bottom: 2.5rem;
    color: var(--agenda-text);
}

.home-hero__text {
    flex: 1 1 360px;
    min-width: 280px;
}

.home-hero__eyebrow {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--agenda-gold);
    margin-bottom: .6rem;
    font-weight: 600;
}

.home-hero__title {
    font-family: 'Cinzel Decorative', serif;
    color: var(--agenda-gold);
    font-size: 2.6rem;
    margin-bottom: .85rem;
}

.home-hero__tagline {
    font-size: 1.05rem;
    color: var(--agenda-text);
    opacity: .92;
    margin-bottom: 1.5rem;
    max-width: 46ch;
}

.home-hero__art {
    flex: 1 1 320px;
    min-width: 240px;
    max-width: 420px;
}

.home-hero__art svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .3));
}

@media (max-width: 767.98px) {
    .home-hero {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
    }

    .home-hero__tagline {
        max-width: none;
    }

    .home-hero__text .d-flex {
        justify-content: center;
    }
}

.home-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.home-feature {
    background: #fff;
    color: #212529;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: .75rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
}

.home-feature__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--agenda-bg-a), var(--agenda-bg-b));
    color: var(--agenda-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin: 0 auto .85rem;
}

.home-feature h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.home-feature p {
    font-size: .85rem;
    color: #6c757d;
    margin: 0;
}

/* =============================================================================
   Entretenimiento — Ajedrez
   ============================================================================= */

.chess-hero {
    text-align: center;
    margin-bottom: 1.75rem;
}

.chess-hero h1 {
    font-family: 'Cinzel Decorative', serif;
    color: var(--agenda-gold);
    font-size: 1.9rem;
    margin-bottom: .4rem;
}

.chess-hero p {
    color: #6c757d;
    max-width: 40rem;
    margin: 0 auto;
}

.chess-layout {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

.chess-board-frame {
    background: linear-gradient(155deg, #8d7f6a 0%, #6b5f4d 45%, #443c30 100%);
    padding: .9rem;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .15);
    flex: 0 0 auto;
}

.chess-board {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    width: min(92vw, 560px);
    aspect-ratio: 1 / 1;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45) inset;
}

.chess-square {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: filter .1s ease;
}

.chess-square--light { background: #efe4cb; }
.chess-square--dark  { background: #232c4a; }

.chess-square:hover { filter: brightness(1.1); }

.chess-square__coord {
    position: absolute;
    font-size: .55rem;
    font-weight: 700;
    opacity: .6;
    pointer-events: none;
    line-height: 1;
}
.chess-square__coord--file { bottom: 3px; right: 5px; }
.chess-square__coord--rank { top: 3px; left: 5px; }
.chess-square--light .chess-square__coord { color: #8a7752; }
.chess-square--dark  .chess-square__coord { color: #97a2c2; }

.chess-piece {
    font-size: min(8.4vw, 48px);
    line-height: 1;
    pointer-events: none;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .4));
    transition: transform .12s ease;
}
.chess-square:hover .chess-piece { transform: translateY(-2px) scale(1.04); }

.chess-piece--w {
    color: #ffffff;
    -webkit-text-stroke: .75px #4a4d55;
}
.chess-piece--b {
    color: #1e2026;
    -webkit-text-stroke: 1px #cfd2da;
}

.chess-square.is-selected::before {
    content: '';
    position: absolute;
    inset: 4%;
    border-radius: .35rem;
    box-shadow: 0 0 0 3px rgba(245, 245, 240, .9), 0 0 14px 2px rgba(0, 0, 0, .4);
    pointer-events: none;
}

.chess-square.is-last-move {
    box-shadow: inset 0 0 0 999px rgba(150, 150, 140, .28);
}

.chess-square.is-check::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(220, 53, 69, .8), rgba(220, 53, 69, 0) 72%);
    animation: chess-check-pulse 1.1s ease-in-out infinite;
    pointer-events: none;
}
@keyframes chess-check-pulse {
    0%, 100% { opacity: .5; }
    50%      { opacity: 1; }
}

/* Indicadores estilo "Chess Titans": punto para casillas libres, anillo para capturas. */
.chess-indicator-dot::after {
    content: '';
    position: absolute;
    width: 28%;
    height: 28%;
    border-radius: 50%;
    background: rgba(120, 120, 114, .8);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 1px 4px rgba(0, 0, 0, .4);
    pointer-events: none;
}
.chess-indicator-ring::after {
    content: '';
    position: absolute;
    inset: 7%;
    border-radius: 50%;
    border: 4px solid rgba(120, 120, 114, .85);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
    pointer-events: none;
}

/* ---- Panel lateral ---- */
.chess-panel {
    background: linear-gradient(180deg, var(--agenda-bg-a), var(--agenda-bg-b));
    border: 1px solid rgba(201, 164, 92, .3);
    border-radius: .85rem;
    color: var(--agenda-text);
    padding: 1.35rem;
    width: min(92vw, 320px);
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .5);
}

.chess-panel h2 {
    font-family: 'Cinzel Decorative', serif;
    color: var(--agenda-gold);
    font-size: 1.15rem;
    text-align: center;
    margin-bottom: 1rem;
}

.chess-panel__group {
    margin-bottom: 1.1rem;
}

.chess-panel__label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--agenda-muted);
    margin-bottom: .4rem;
}

.chess-toggle {
    display: flex;
    gap: .4rem;
}

.chess-toggle button {
    flex: 1;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(201, 164, 92, .35);
    color: var(--agenda-text);
    border-radius: .5rem;
    padding: .4rem .5rem;
    font-size: .82rem;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}
.chess-toggle button:hover { background: rgba(201, 164, 92, .18); }
.chess-toggle button.active {
    background: var(--agenda-gold);
    border-color: var(--agenda-gold);
    color: #1a2036;
}

.chess-status-line {
    text-align: center;
    font-weight: 700;
    padding: .55rem .5rem;
    margin-bottom: 1rem;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .06);
    min-height: 1.4em;
}
.chess-status-line.is-check { color: #ff9a92; }
.chess-status-line.is-thinking { color: var(--agenda-muted); font-weight: 500; font-style: italic; }

.chess-captured-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-height: 1.9rem;
    font-size: 1.15rem;
    flex-wrap: wrap;
}
.chess-captured-row .chess-piece { font-size: 1.15rem; filter: none; }

.chess-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.chess-actions .btn { flex: 1; }

.chess-history {
    max-height: 190px;
    overflow-y: auto;
    background: rgba(0, 0, 0, .18);
    border-radius: .5rem;
    padding: .6rem .8rem;
    font-size: .8rem;
}
.chess-history ol {
    columns: 2;
    column-gap: 1rem;
    margin: 0;
    padding-left: 1.1rem;
}
.chess-history li { margin-bottom: .15rem; }
.chess-history__black { color: var(--agenda-muted); }
.chess-history__empty {
    margin: 0;
    color: var(--agenda-muted);
    text-align: center;
    font-size: .78rem;
}

.chess-promo-choices {
    display: flex;
    gap: .75rem;
    justify-content: center;
}
.chess-promo-choices button {
    background: linear-gradient(180deg, var(--agenda-bg-a), var(--agenda-bg-b));
    border: 1px solid rgba(201, 164, 92, .4);
    border-radius: .6rem;
    padding: .6rem .9rem;
    font-size: 2.2rem;
    line-height: 1;
    transition: transform .12s ease, border-color .12s ease;
}
.chess-promo-choices button:hover {
    transform: translateY(-3px);
    border-color: var(--agenda-gold);
}
.chess-promo-choices .chess-piece { font-size: 2.2rem; filter: none; }

@media (max-width: 991.98px) {
    .chess-layout { flex-direction: column; align-items: center; }
    .chess-panel { width: min(92vw, 560px); }
}

/* ---- Vitrina de juegos (índice de Entretenimiento) ---- */
.game-card {
    display: block;
    text-decoration: none;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    background: linear-gradient(165deg, var(--agenda-bg-a), var(--agenda-bg-b));
    border: 1px solid rgba(201, 164, 92, .3);
    color: var(--agenda-text);
    box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .5);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    height: 100%;
}
.game-card:hover {
    transform: translateY(-5px);
    border-color: var(--agenda-gold);
    box-shadow: 0 22px 42px -14px rgba(0, 0, 0, .6);
    color: var(--agenda-text);
}
.game-card__icon {
    font-size: 2.4rem;
    color: var(--agenda-gold);
    margin-bottom: .75rem;
    line-height: 1;
}
.game-card h3 {
    font-family: 'Cinzel Decorative', serif;
    color: var(--agenda-gold);
    font-size: 1.15rem;
    margin-bottom: .5rem;
}
.game-card p {
    color: var(--agenda-text);
    opacity: .85;
    font-size: .88rem;
    margin-bottom: .9rem;
}
.game-card__cta {
    font-size: .8rem;
    font-weight: 700;
    color: var(--agenda-gold);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}
.game-card__badges {
    display: flex;
    gap: .35rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}
.game-card__badges .badge { background: rgba(201, 164, 92, .18); color: var(--agenda-gold); font-weight: 600; }

.game-card--soon {
    opacity: .55;
    cursor: default;
}
.game-card--soon:hover { transform: none; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .5); border-color: rgba(201, 164, 92, .3); }

/* =============================================================================
   Entretenimiento — Damas
   Reutiliza el tablero/marco/indicadores del ajedrez (.chess-board-frame,
   .chess-board, .chess-square, .chess-indicator-dot/ring, .chess-panel,
   .chess-history...); aquí solo se define la ficha (disco), distinta de los
   iconos de pieza del ajedrez.
   ============================================================================= */
.dama-piece {
    width: 72%;
    height: 72%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    pointer-events: none;
    transition: transform .12s ease;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .45), inset 0 2px 3px rgba(255, 255, 255, .25), inset 0 -3px 4px rgba(0, 0, 0, .3);
}
.chess-square:hover .dama-piece { transform: translateY(-2px) scale(1.05); }

.dama-piece--w {
    background: radial-gradient(circle at 35% 30%, #ffffff, #d6d6d6 75%);
    border: 2px solid #4a4d55;
    color: #35373f;
}
.dama-piece--b {
    background: radial-gradient(circle at 35% 30%, #3a3f4a, #1a1c22 75%);
    border: 2px solid #cfd2da;
    color: #cfd2da;
}

.dama-piece--mini {
    width: 1rem;
    height: 1rem;
    box-shadow: none;
    border-width: 1px;
}

@media (max-width: 991.98px) {
    .dama-piece { font-size: .7rem; }
}