:root {
    --negro: #0A0A0A;
    --negro-suave: #141414;
    --negro-elev: #1C1C1C;
    --negro-borde: #2A2A2A;
    --dorado: #C9A227;
    --dorado-claro: #E0BE4F;
    --dorado-oscuro: #8B6F1B;
    --dorado-tenue: rgba(201, 162, 39, 0.12);
    --texto: #F5F1E6;
    --texto-tenue: #A39E91;
    --texto-mute: #6B6862;
    --estado-agendado: #C9A227;
    --estado-atendido: #4A9D5F;
    --estado-cancelado: #C0443B;
    --estado-reprogramado: #A89968;
    --font-display: 'Playfair Display', 'Georgia', serif;
    --font-body: 'Manrope', system-ui, sans-serif;
    --radius: 4px;
    --radius-lg: 8px;
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-elev: 0 12px 40px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }

html, body {
    background: var(--negro);
    color: var(--texto);
    font-family: var(--font-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

body {
    min-height: 100vh;
    background: radial-gradient(ellipse at top, rgba(201,162,39,0.04) 0%, transparent 50%), var(--negro);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--texto);
}

a { color: var(--dorado-claro); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--dorado); }
::selection { background: var(--dorado); color: var(--negro); }

.navbar-esthetic {
    background: rgba(10,10,10,0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--negro-borde);
    padding: 0.85rem 0;
    position: sticky; top: 0; z-index: 1000;
}

.navbar-brand-esthetic {
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 700;
    color: var(--dorado) !important;
    letter-spacing: 0.08em; text-transform: uppercase;
    display: flex; align-items: center; gap: 0.6rem;
}

.navbar-brand-esthetic .pole {
    display: inline-block; width: 8px; height: 22px;
    background: repeating-linear-gradient(45deg, var(--dorado) 0 4px, var(--negro) 4px 8px);
    border-radius: 2px; border: 1px solid var(--dorado);
}

.nav-link-esthetic {
    color: var(--texto-tenue) !important;
    font-weight: 500; font-size: 0.92rem;
    letter-spacing: 0.04em; text-transform: uppercase;
    padding: 0.5rem 1rem !important;
    transition: color var(--transition); position: relative;
}
.nav-link-esthetic:hover, .nav-link-esthetic.active { color: var(--dorado) !important; }
.nav-link-esthetic.active::after {
    content: ''; position: absolute; bottom: -4px; left: 1rem; right: 1rem;
    height: 1px; background: var(--dorado);
}

.user-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: var(--dorado-tenue);
    border: 1px solid var(--dorado-oscuro);
    border-radius: var(--radius);
    color: var(--dorado-claro);
    font-size: 0.85rem; font-weight: 600; letter-spacing: 0.05em;
}
.user-badge .inicial {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--dorado); color: var(--negro);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700;
}

.card-esthetic {
    background: var(--negro-suave);
    border: 1px solid var(--negro-borde);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    transition: border-color var(--transition), transform var(--transition);
}
.card-esthetic:hover { border-color: var(--dorado-oscuro); }
.card-esthetic h3 { font-size: 1.2rem; margin: 0 0 0.5rem 0; color: var(--texto); }
.card-esthetic .lead { color: var(--texto-tenue); font-size: 0.95rem; margin: 0; }

.card-link { text-decoration: none; color: inherit; display: block; }
.card-link:hover { color: inherit; }
.card-link:hover .card-esthetic { transform: translateY(-2px); box-shadow: var(--shadow-soft); }

.btn-esthetic {
    background: var(--dorado); color: var(--negro);
    border: 1px solid var(--dorado);
    padding: 0.65rem 1.5rem;
    font-family: var(--font-body); font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase;
    font-size: 0.85rem; border-radius: var(--radius);
    transition: all var(--transition); cursor: pointer;
}
.btn-esthetic:hover {
    background: var(--dorado-claro); border-color: var(--dorado-claro);
    color: var(--negro); transform: translateY(-1px);
}

.btn-esthetic-outline {
    background: transparent; color: var(--dorado);
    border: 1px solid var(--dorado);
    padding: 0.65rem 1.5rem; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase;
    font-size: 0.85rem; border-radius: var(--radius);
    transition: all var(--transition); cursor: pointer;
}
.btn-esthetic-outline:hover { background: var(--dorado-tenue); color: var(--dorado-claro); }

.btn-esthetic-ghost {
    background: transparent; color: var(--texto-tenue);
    border: 1px solid var(--negro-borde);
    padding: 0.55rem 1.2rem; font-weight: 500;
    border-radius: var(--radius);
    transition: all var(--transition); cursor: pointer;
}
.btn-esthetic-ghost:hover { color: var(--texto); border-color: var(--texto-tenue); }

.form-control-esthetic, .form-select-esthetic {
    background: var(--negro);
    border: 1px solid var(--negro-borde);
    color: var(--texto);
    padding: 0.7rem 0.95rem;
    border-radius: var(--radius);
    font-family: var(--font-body);
    transition: border-color var(--transition), box-shadow var(--transition);
    width: 100%;
}
.form-control-esthetic:focus, .form-select-esthetic:focus {
    outline: none; border-color: var(--dorado);
    box-shadow: 0 0 0 3px var(--dorado-tenue);
    background: var(--negro); color: var(--texto);
}
.form-control-esthetic::placeholder { color: var(--texto-mute); }

.form-label-esthetic {
    display: block; font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--texto-tenue); font-weight: 600;
    margin-bottom: 0.45rem;
}

.login-wrap {
    min-height: 100vh; display: flex;
    align-items: center; justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 20% 30%, rgba(201,162,39,0.08) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(201,162,39,0.04) 0%, transparent 40%),
        var(--negro);
}

.login-card {
    width: 100%; max-width: 420px;
    background: var(--negro-suave);
    border: 1px solid var(--negro-borde);
    border-radius: var(--radius-lg);
    padding: 3rem 2.5rem;
    box-shadow: var(--shadow-elev);
    position: relative;
}
.login-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--dorado) 50%, transparent 100%);
}

.login-brand { text-align: center; margin-bottom: 2.5rem; }
.login-brand .pre {
    font-family: var(--font-body); font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.3em;
    color: var(--texto-tenue); margin-bottom: 0.75rem;
}
.login-brand h1 {
    font-family: var(--font-display); font-size: 2.75rem;
    color: var(--dorado); margin: 0; letter-spacing: 0.05em;
}
.login-brand .post {
    font-family: var(--font-display); font-style: italic;
    font-size: 0.95rem; color: var(--texto-tenue); margin-top: 0.5rem;
}

.divider-gold {
    display: flex; align-items: center; gap: 1rem;
    margin: 1.5rem 0; color: var(--dorado-oscuro);
    font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
}
.divider-gold::before, .divider-gold::after {
    content: ''; flex: 1; height: 1px; background: var(--negro-borde);
}

.page-header { margin: 2.5rem 0 2rem 0; }
.page-header .eyebrow {
    font-size: 0.78rem; text-transform: uppercase;
    letter-spacing: 0.25em; color: var(--dorado); margin-bottom: 0.5rem;
}
.page-header h1 { font-size: 2.5rem; margin: 0; }
.page-header .lead { color: var(--texto-tenue); margin-top: 0.6rem; font-size: 1.05rem; }

.alert-esthetic {
    padding: 0.85rem 1.15rem; border-radius: var(--radius);
    border: 1px solid; font-size: 0.9rem; margin-bottom: 1rem;
}
.alert-esthetic.error { background: rgba(192,68,59,0.1); border-color: var(--estado-cancelado); color: #E8857E; }
.alert-esthetic.success { background: rgba(74,157,95,0.1); border-color: var(--estado-atendido); color: #7BC68F; }
.alert-esthetic.info { background: var(--dorado-tenue); border-color: var(--dorado-oscuro); color: var(--dorado-claro); }

@media (max-width: 768px) {
    .login-card { padding: 2rem 1.5rem; }
    .login-brand h1 { font-size: 2.2rem; }
    .page-header h1 { font-size: 1.8rem; }
    .navbar-brand-esthetic { font-size: 1.2rem; }
}

/* ============================================================
   Clientes - Toolbar de búsqueda
   ============================================================ */
.toolbar-esthetic {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    align-items: center; justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--negro-suave);
    border: 1px solid var(--negro-borde);
    border-radius: var(--radius-lg);
}
.toolbar-esthetic .search-box {
    flex: 1; min-width: 240px;
    display: flex; gap: 0.5rem;
}
.toolbar-esthetic .search-box input {
    flex: 1;
}
.toolbar-esthetic .filtros {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--negro-borde);
    border-radius: var(--radius);
    overflow: hidden;
}
.toolbar-esthetic .filtros a {
    padding: 0.5rem 1rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--texto-tenue);
    border-right: 1px solid var(--negro-borde);
    transition: all var(--transition);
}
.toolbar-esthetic .filtros a:last-child { border-right: none; }
.toolbar-esthetic .filtros a:hover { background: var(--negro-elev); color: var(--texto); }
.toolbar-esthetic .filtros a.activo {
    background: var(--dorado-tenue);
    color: var(--dorado-claro);
    font-weight: 600;
}

/* Tabla de clientes */
.tabla-esthetic {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--negro-suave);
    border: 1px solid var(--negro-borde);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.tabla-esthetic thead th {
    background: var(--negro-elev);
    color: var(--texto-tenue);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    padding: 0.85rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--negro-borde);
}
.tabla-esthetic tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--negro-borde);
    color: var(--texto);
    font-size: 0.93rem;
}
.tabla-esthetic tbody tr:last-child td { border-bottom: none; }
.tabla-esthetic tbody tr {
    transition: background var(--transition);
    cursor: pointer;
}
.tabla-esthetic tbody tr:hover { background: var(--negro-elev); }
.tabla-esthetic tbody tr.inactivo td { opacity: 0.55; }
.tabla-esthetic .codigo {
    font-family: var(--font-mono, 'Courier New', monospace);
    color: var(--dorado-claro);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
}
.tabla-esthetic .badge-inactivo {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: rgba(192,68,59,0.15);
    color: #E8857E;
    border: 1px solid rgba(192,68,59,0.4);
    border-radius: 999px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.tabla-esthetic .badge-cumple {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    background: var(--dorado-tenue);
    color: var(--dorado-claro);
    border: 1px solid var(--dorado-oscuro);
    border-radius: 999px;
    font-size: 0.68rem;
    margin-left: 0.4rem;
}

/* Paginador */
.paginador {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 1.25rem;
    color: var(--texto-tenue);
    font-size: 0.85rem;
}
.paginador .botones { display: inline-flex; gap: 0.4rem; }
.paginador a, .paginador span.disabled {
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--negro-borde);
    border-radius: var(--radius);
    color: var(--texto-tenue);
    transition: all var(--transition);
}
.paginador a:hover { border-color: var(--dorado); color: var(--dorado-claro); }
.paginador span.disabled { opacity: 0.4; cursor: not-allowed; }

/* Detalle de cliente - panel */
.detalle-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 1.5rem;
}
@media (max-width: 768px) { .detalle-grid { grid-template-columns: 1fr; } }

.panel-esthetic {
    background: var(--negro-suave);
    border: 1px solid var(--negro-borde);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}
.panel-esthetic h3 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--dorado);
    margin: 0 0 1.25rem 0;
    font-family: var(--font-body);
    font-weight: 600;
}
.dato-row {
    display: flex; justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--negro-borde);
    font-size: 0.93rem;
}
.dato-row:last-child { border-bottom: none; }
.dato-row .label {
    color: var(--texto-tenue);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.dato-row .valor { color: var(--texto); text-align: right; }
.dato-row .valor.muted { color: var(--texto-mute); font-style: italic; }

.cliente-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap; gap: 1rem;
    margin-bottom: 1.5rem;
}
.cliente-header h1 { font-size: 2rem; margin: 0; }
.cliente-header .codigo {
    font-family: 'Courier New', monospace;
    color: var(--dorado-claro);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

/* Form de cliente */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

.form-error {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: #E8857E;
}

/* Estado vacío */
.empty-state {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--texto-tenue);
}
.empty-state h3 {
    font-family: var(--font-display);
    color: var(--texto);
    margin-bottom: 0.5rem;
}

/* Modal simple sin Bootstrap JS */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center; justify-content: center;
    z-index: 2000; padding: 1rem;
}
.modal-overlay.activo { display: flex; }
.modal-card {
    background: var(--negro-suave);
    border: 1px solid var(--dorado-oscuro);
    border-radius: var(--radius-lg);
    padding: 2rem;
    width: 100%; max-width: 480px;
    box-shadow: var(--shadow-elev);
}
.modal-card h3 {
    font-family: var(--font-display);
    color: var(--dorado);
    margin: 0 0 1rem 0;
}
.modal-actions {
    display: flex; justify-content: flex-end; gap: 0.6rem;
    margin-top: 1.25rem;
}

.btn-danger-esthetic {
    background: transparent;
    color: #E8857E;
    border: 1px solid var(--estado-cancelado);
    padding: 0.55rem 1.2rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.82rem;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all var(--transition);
}
.btn-danger-esthetic:hover {
    background: rgba(192,68,59,0.15);
    color: #FF9D95;
}

/* ============================================================
   Agenda - FullCalendar override
   ============================================================ */
.calendario-wrap {
    background: var(--negro-suave);
    border: 1px solid var(--negro-borde);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 2rem;
}

/* FullCalendar - tema oscuro */
.fc {
    --fc-border-color: var(--negro-borde);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: var(--negro);
    --fc-list-event-hover-bg-color: var(--negro-elev);
    --fc-today-bg-color: rgba(201, 162, 39, 0.06);
    --fc-now-indicator-color: var(--dorado);
    --fc-button-bg-color: transparent;
    --fc-button-border-color: var(--negro-borde);
    --fc-button-hover-bg-color: var(--negro-elev);
    --fc-button-hover-border-color: var(--dorado-oscuro);
    --fc-button-active-bg-color: var(--dorado);
    --fc-button-active-border-color: var(--dorado);
    --fc-button-text-color: var(--texto);
    color: var(--texto);
    font-family: var(--font-body);
}

.fc .fc-toolbar {
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.fc .fc-toolbar-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--dorado);
    letter-spacing: 0.02em;
    text-transform: capitalize;
}
.fc .fc-button {
    padding: 0.45rem 0.95rem;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    border-radius: var(--radius);
    box-shadow: none !important;
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    color: var(--negro);
    font-weight: 600;
}
.fc .fc-button-primary:disabled {
    background: var(--negro-elev);
    color: var(--texto-mute);
    border-color: var(--negro-borde);
}

.fc-theme-standard td, .fc-theme-standard th,
.fc-theme-standard .fc-scrollgrid {
    border-color: var(--negro-borde);
}

.fc .fc-col-header-cell-cushion,
.fc .fc-list-day-cushion {
    color: var(--texto-tenue);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    padding: 0.6rem 0.4rem;
}
.fc .fc-list-day-cushion {
    background: var(--negro-elev);
}
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion {
    color: var(--texto-mute);
    font-size: 0.74rem;
    font-family: var(--font-body);
}
.fc .fc-day-today .fc-col-header-cell-cushion {
    color: var(--dorado);
}
.fc .fc-resource .fc-col-header-cell-cushion {
    color: var(--dorado-claro);
    font-size: 0.95rem;
    font-family: var(--font-display);
    text-transform: none;
    letter-spacing: 0.02em;
}

/* Eventos */
.fc-event {
    border-radius: 4px !important;
    padding: 2px 4px !important;
    font-size: 0.78rem !important;
    font-weight: 600;
    cursor: pointer;
    border-width: 2px !important;
}
.fc-event:hover { filter: brightness(1.1); }
.fc-event-title { font-weight: 600; }

/* Sobreturnos: borde punteado + transparencia */
.fc-event.evt-sobreturno {
    border-style: dashed !important;
    background-image: repeating-linear-gradient(
        45deg,
        transparent 0 4px,
        rgba(0,0,0,0.12) 4px 8px
    ) !important;
}

/* Estados con borde extra para los reprogramados/cancelados */
.fc-event.evt-cancelado { text-decoration: line-through; opacity: 0.85; }
.fc-event.evt-reprogramado { font-style: italic; opacity: 0.75; }

/* Slot fuera de horario laboral */
.fc .fc-non-business {
    background: rgba(20, 20, 20, 0.6);
}

/* Línea del "ahora" */
.fc .fc-timegrid-now-indicator-line {
    border-color: var(--dorado);
    border-width: 2px;
}

/* Modal de turno */
.modal-card.lg { max-width: 640px; }
.modal-card label { display: block; }
.modal-card .form-grid { gap: 0.85rem; }

/* Autocomplete dropdown */
.autocomplete-wrap { position: relative; }
.autocomplete-results {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--negro-elev);
    border: 1px solid var(--dorado-oscuro);
    border-radius: var(--radius);
    margin-top: 0.25rem;
    max-height: 240px;
    overflow-y: auto;
    z-index: 10;
    display: none;
}
.autocomplete-results.activo { display: block; }
.autocomplete-results .item {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--negro-borde);
    cursor: pointer;
    transition: background var(--transition);
}
.autocomplete-results .item:last-child { border-bottom: none; }
.autocomplete-results .item:hover,
.autocomplete-results .item.activo { background: var(--dorado-tenue); }
.autocomplete-results .item .nombre {
    color: var(--texto); font-weight: 600; font-size: 0.92rem;
}
.autocomplete-results .item .meta {
    color: var(--texto-tenue); font-size: 0.78rem; margin-top: 2px;
}
.autocomplete-results .item.crear-nuevo {
    color: var(--dorado-claro);
    text-align: center;
    font-style: italic;
}

/* Pills de tipo de turno */
.pill-group { display: inline-flex; gap: 0; border: 1px solid var(--negro-borde); border-radius: var(--radius); overflow: hidden; }
.pill-group label {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texto-tenue);
    cursor: pointer;
    border-right: 1px solid var(--negro-borde);
    transition: all var(--transition);
    margin: 0;
}
.pill-group label:last-child { border-right: none; }
.pill-group input[type="radio"] { display: none; }
.pill-group input[type="radio"]:checked + span,
.pill-group label:has(input:checked) {
    background: var(--dorado-tenue);
    color: var(--dorado-claro);
    font-weight: 600;
}

/* Acciones de turno (panel derecho del modal de detalle) */
.turno-detalle .estado-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    border: 1px solid;
}
.estado-pill.AGENDADO { background: var(--dorado-tenue); color: var(--dorado-claro); border-color: var(--dorado-oscuro); }
.estado-pill.ATENDIDO { background: rgba(74,157,95,0.15); color: #7BC68F; border-color: var(--estado-atendido); }
.estado-pill.CANCELADO { background: rgba(192,68,59,0.15); color: #E8857E; border-color: var(--estado-cancelado); }
.estado-pill.REPROGRAMADO { background: rgba(168,153,104,0.15); color: #C9B782; border-color: var(--estado-reprogramado); }

/* Leyenda de estados */
.leyenda-agenda {
    display: flex; flex-wrap: wrap; gap: 1rem;
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: var(--texto-tenue);
}
.leyenda-agenda .item { display: inline-flex; align-items: center; gap: 0.4rem; }
.leyenda-agenda .swatch {
    display: inline-block; width: 14px; height: 14px;
    border-radius: 3px; border: 2px solid;
}

/* Ocultar cartel de licencia FullCalendar (solución provisoria) */
.fc-license-message { display: none !important; }

/* ============================================================
   FAB - Botón flotante "+" para crear turno
   ============================================================ */
.fab-esthetic {
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    left: auto !important;
    top: auto !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: var(--dorado);
    color: var(--negro);
    border: none;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 0 4px rgba(201,162,39,0.15);
    transition: background var(--transition), transform var(--transition);
    z-index: 9999;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}
.fab-esthetic:hover, .fab-esthetic:active {
    background: var(--dorado-claro);
    transform: scale(1.05);
}
.fab-esthetic:active { transform: scale(0.95); }

@media (max-width: 768px) {
    .fab-esthetic {
        bottom: 1rem !important;
        right: 1rem !important;
        width: 56px !important;
        height: 56px !important;
    }
}

/* En mobile: ajustar la barra de FullCalendar para que sea touch-friendly */
@media (max-width: 768px) {
    .fc .fc-toolbar { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .fc .fc-toolbar-title { text-align: center; font-size: 1.15rem; }
    .fc .fc-button { padding: 0.55rem 0.7rem; font-size: 0.72rem; }
    .calendario-wrap { padding: 0.5rem; }
    .fc .fc-timegrid-slot-label-cushion { font-size: 0.68rem; }
}

/* ============================================================
   Evento de calendario - inicial con círculo
   ============================================================ */
.evt-content {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 1px 2px;
    width: 100%;
    min-width: 0;
}
.evt-inicial {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--negro);
    color: var(--dorado);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--dorado);
    line-height: 1;
}
.evt-icono {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--negro);
    opacity: 0.85;
}
.evt-icono svg { display: block; }
.evt-titulo {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    font-weight: 600;
}

/* En estados oscuros (reprogramado), invertir color del ícono */
.fc-event.evt-reprogramado .evt-icono { color: var(--dorado); }

/* Mobile: bajar un toque el tamaño de los íconos para que entren bien */
@media (max-width: 768px) {
    .evt-content { gap: 3px; padding: 0 1px; }
    .evt-inicial { width: 16px; height: 16px; font-size: 0.7rem; }
    .evt-icono svg { width: 11px; height: 11px; }
    .evt-titulo { font-size: 0.72rem; }
}

/* En estados claros (atendido, cancelado), el círculo se mantiene legible */
.fc-event.evt-cancelado .evt-titulo,
.fc-event.evt-reprogramado .evt-titulo {
    /* heredan el text-decoration / italic del estilo del estado */
}

/* ============================================================
   Cumpleaños
   ============================================================ */
.cumple-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.85rem;
}
@media (max-width: 600px) {
    .cumple-grid { grid-template-columns: 1fr; }
}

.cumple-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: var(--negro-suave);
    border: 1px solid var(--negro-borde);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition);
    position: relative;
}
.cumple-card:hover {
    border-color: var(--dorado-oscuro);
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
    color: inherit;
}
.cumple-card.hoy {
    border-color: var(--dorado);
    background: linear-gradient(135deg, var(--negro-suave) 0%, rgba(201,162,39,0.08) 100%);
}
.cumple-card.pasado { opacity: 0.55; }

.cumple-fecha {
    flex-shrink: 0;
    text-align: center;
    width: 64px;
    padding: 0.4rem 0;
    background: var(--negro);
    border: 1px solid var(--negro-borde);
    border-radius: var(--radius);
}
.cumple-card.hoy .cumple-fecha {
    background: var(--dorado);
    border-color: var(--dorado);
}
.cumple-fecha .dia-semana {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--dorado-claro);
    font-weight: 600;
}
.cumple-card.hoy .cumple-fecha .dia-semana { color: var(--negro); }
.cumple-fecha .fecha {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--texto);
    margin-top: 2px;
    letter-spacing: 0.02em;
}
.cumple-card.hoy .cumple-fecha .fecha { color: var(--negro); }

.cumple-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.cumple-info .nombre {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--texto);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cumple-info .meta {
    font-size: 0.82rem;
    color: var(--texto-tenue);
    margin-top: 0.2rem;
}
.cumple-info .meta strong {
    color: var(--dorado-claro);
    font-weight: 700;
}

.badge-hoy {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    background: var(--dorado);
    color: var(--negro);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    border-radius: 999px;
    font-family: var(--font-body);
}

.cumple-codigo {
    flex-shrink: 0;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    color: var(--dorado-claro);
    letter-spacing: 0.05em;
    opacity: 0.6;
}

/* ============================================================
   Pills de rango (cumpleaños)
   ============================================================ */
.pills-rango {
    display: inline-flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.3rem;
    background: var(--negro-suave);
    border: 1px solid var(--negro-borde);
    border-radius: 999px;
}

.pill-rango {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--texto-tenue);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: all var(--transition);
    white-space: nowrap;
}

.pill-rango svg {
    flex-shrink: 0;
    transition: transform var(--transition);
    opacity: 0.7;
}

.pill-rango:hover {
    background: var(--negro-elev);
    color: var(--texto);
    border-color: var(--negro-borde);
}
.pill-rango:hover svg { opacity: 1; transform: scale(1.05); }

.pill-rango.activo {
    background: var(--dorado);
    color: var(--negro);
    border-color: var(--dorado);
    box-shadow: 0 2px 12px rgba(201, 162, 39, 0.25);
}
.pill-rango.activo svg { opacity: 1; }
.pill-rango.activo:hover {
    background: var(--dorado-claro);
    color: var(--negro);
    border-color: var(--dorado-claro);
}

@media (max-width: 600px) {
    .pills-rango { width: 100%; justify-content: center; }
    .pill-rango { padding: 0.45rem 0.7rem; font-size: 0.72rem; }
    .pill-rango span { display: inline; }
}