/* ============================================================
   assets/css/estilos.css — Agenda Personal
   ============================================================ */

/* --- Variables -------------------------------------------- */
:root {
    --color-primary:    #5b4ef8;
    --color-primary-dk: #4c3db5;
    --color-success:    #166534;
    --color-danger:     #b91c1c;
    --color-warning:    #d97706;
    --color-muted:      #6b6b6b;
    --color-bg:         #f8f8f6;
    --color-card:       #ffffff;
    --color-border:     #e8e8e6;
    --color-text:       #1a1a1a;
    --color-text-light: #9e9e9b;

    --radius:    0.75rem;
    --radius-sm: 0.5rem;
    --shadow:    0 1px 2px rgba(26,26,26,.06), 0 1px 3px rgba(26,26,26,.04);
    --shadow-md: 0 4px 12px rgba(26,26,26,.08), 0 2px 6px rgba(26,26,26,.04);
}

/* --- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- SVG icons -------------------------------------------- */
.svg-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
}

body {
    /*font-family: 'Syne', system-ui, sans-serif;*/
    font-family: 'Inter', sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Navbar ----------------------------------------------- */
.navbar {
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 0.5px solid var(--color-border);
    height: 52px;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-brand {
    font-size: .875rem;
    font-weight: 700;
    color: #1a1a1a;
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 7px;
}
.navbar-brand .svg-icon { width: 1.25rem; height: 1.25rem; }

/* Hamburguesa (solo visible en mobile) */
.navbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: .4rem;
    margin-left: auto;
}
.navbar-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform .2s, opacity .2s;
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.navbar-center {
    display: flex;
    align-items: center;
    gap: 2px;
}
.navbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar-center a {
    color: #6b6b6b;
    font-size: .75rem;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 7px;
    transition: background .15s, color .15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.navbar-center a:hover { background: #f5f5f3; color: #1a1a1a; text-decoration: none; }
.navbar-center a.active { color: #1a1a1a; font-weight: 700; }

.navbar-avatar {
    display: flex;
    align-items: center;
    gap: .45rem;
    cursor: default;
    margin-left: .25rem;
}
.navbar-avatar-circle {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .03em;
    flex-shrink: 0;
}
.navbar-avatar-name { display: none; font-size: .85rem; color: var(--color-muted); }

.btn-nuevo {
    background: var(--color-primary) !important;
    color: #fff !important;
    padding: .35rem .85rem !important;
    border-radius: var(--radius) !important;
    font-weight: 600;
}
.btn-nuevo:hover { background: var(--color-primary-dk) !important; }

.btn-logout {
    font-size: .75rem;
    font-weight: 600;
    color: #6b6b6b;
    padding: 5px 10px;
    border-radius: 7px;
    border: 0.5px solid var(--color-border);
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.btn-logout:hover { background: #f5f5f3; color: #1a1a1a; text-decoration: none; }

/* --- Contenedor ------------------------------------------- */
.contenedor {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    flex: 1;
}

/* --- Cards ------------------------------------------------ */
.card {
    background: var(--color-card);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    margin-bottom: 1.25rem;
}

/* --- Botones ---------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    border: 0.5px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
    font-family: inherit;
}
.btn:hover { text-decoration: none; }

.btn-primary  { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.btn-primary:hover { background: #333; }
.btn-secondary{ background: #f5f5f3; color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { background: #ede9fe; color: var(--color-primary); border-color: #c8c1f8; }
.btn-success  { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.btn-success:hover { background: #333; }
.btn-danger   { background: #fff5f5; color: #b91c1c; border: 0.5px solid #fecaca; }
.btn-danger:hover { background: #fee2e2; }
.btn-whatsapp { background: #dcfce7; color: #166534; border: none; }
.btn-whatsapp:hover { background: #bbf7d0; }
.btn-email    { background: #f5f5f3; color: var(--color-text); border: 0.5px solid var(--color-border); }
.btn-email:hover { background: #ede9fe; color: var(--color-primary); }
.btn-block    { width: 100%; justify-content: center; }
.btn-sm       { padding: .25rem .6rem; font-size: .8rem; }

/* --- Alertas ---------------------------------------------- */
.alerta {
    padding: .75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: .9rem;
}
.alerta-error  { background: #fff5f5; color: #b91c1c; border: 0.5px solid #fecaca; }
.alerta-exito  { background: #dcfce7; color: #166534; border: 0.5px solid #86efac; }
.alerta-info   { background: #ede9fe; color: #4c3db5; border: 0.5px solid #c4b5fd; }

/* --- Formularios ------------------------------------------ */
.campo {
    margin-bottom: 1.1rem;
}
.campo label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: .35rem;
}
.campo label small { font-weight: 400; color: var(--color-muted); }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="date"],
.campo input[type="time"],
.campo select,
.campo textarea {
    width: 100%;
    padding: .55rem .8rem;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: .95rem;
    font-family: inherit;
    color: var(--color-text);
    background: #fff;
    transition: border-color .15s;
}
.campo input:focus,
.campo textarea:focus,
.campo select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(91,78,248,.15);
}

.campo-check { margin-top: .5rem; }
.check-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    font-weight: 500;
}
.check-label input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--color-primary);
}

.campos-fila {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 600px) {
    .campos-fila { grid-template-columns: 1fr; }
}

.form-acciones {
    display: flex;
    gap: .75rem;
    margin-top: 1.5rem;
}

/* --- Cabecera de página ----------------------------------- */
.pagina-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.pagina-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
}

/* --- Navegador de fechas (vista diaria) ------------------- */
.nav-fechas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: .75rem;
}
.fecha-actual {
    font-size: 1.05rem;
    font-weight: 600;
    text-align: center;
    flex: 1;
}
.badge-hoy {
    background: var(--color-primary);
    color: #fff;
    font-size: .7rem;
    padding: .1rem .45rem;
    border-radius: 999px;
    vertical-align: middle;
    margin-left: .4rem;
}

/* --- Lista de eventos ------------------------------------- */
.seccion-titulo {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0 .75rem;
}
.seccion-titulo h3 { font-size: 1rem; font-weight: 700; }
.seccion-vencidos h3 { color: var(--color-danger); }

.contador {
    background: var(--color-primary);
    color: #fff;
    font-size: .75rem;
    padding: .1rem .45rem;
    border-radius: 999px;
}
.contador-rojo { background: var(--color-danger); }

.lista-eventos { display: flex; flex-direction: column; gap: .6rem; }

.evento-item {
    background: #fff;
    border: 0.5px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--shadow);
    transition: box-shadow .15s;
}
.evento-item:hover { box-shadow: var(--shadow-md); }

.evento-item.evento-vencido   { border-left-color: var(--color-danger); background: #fff5f5; }
.evento-item.evento-completado{ border-left-color: #9ca3af; background: #fafafa; opacity: .72; }

.evento-hora {
    min-width: 110px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-muted);
    white-space: nowrap;
}
.evento-info { flex: 1; }
.evento-titulo {
    font-weight: 600;
    color: var(--color-text);
    font-size: .95rem;
}
.evento-titulo:hover { text-decoration: underline; }
.evento-completado .evento-titulo { text-decoration: line-through; color: var(--color-muted); }
.evento-desc { font-size: .82rem; color: var(--color-muted); margin-top: .15rem; }
.evento-estado { white-space: nowrap; }

.vacio { text-align: center; color: var(--color-muted); padding: 2rem; }

/* --- Breadcrumb / page-top -------------------------------- */
.page-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
.breadcrumb {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    color: var(--color-text-light);
    font-weight: 600;
}
.breadcrumb span:last-child { color: var(--color-text); }
.breadcrumb i { font-size: .6rem; color: #c4c4c0; }

/* --- Meta grid (detalle evento) --------------------------- */
.meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
    margin-bottom: 1rem;
}
.meta-item-full { grid-column: 1 / -1; }
.meta-label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-bottom: .3rem;
}
.meta-value {
    font-size: .95rem;
    font-weight: 600;
    color: var(--color-text);
    display: block;
}
.meta-value.mono { font-family: 'DM Mono', monospace; font-size: .9rem; }
.meta-desc { font-size: .875rem; color: var(--color-muted); line-height: 1.6; }

/* --- Detalle de evento ------------------------------------ */
.evento-detalle { position: relative; }
.evento-detalle.evento-vencido    { border-top: 3px solid var(--color-danger); }
.evento-detalle.evento-completado { border-top: 3px solid #9ca3af; }
.evento-detalle.evento-pendiente  { border-top: 3px solid var(--color-primary); }

.evento-detalle-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.evento-detalle-header h3 { font-size: 1.4rem; font-weight: 700; }

.badge-estado {
    display: inline-block;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge-evento-pendiente  { background: #ede9fe; color: #4c3db5; }
.badge-evento-vencido    { background: #fee2e2; color: #991b1b; }
.badge-evento-completado { background: #dcfce7; color: #166534; }

.evento-detalle-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.info-item { display: flex; flex-direction: column; gap: .3rem; }
.info-item-full { width: 100%; }
.info-label { font-size: .72rem; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: .06em; }

.info-fecha-hora {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}
.info-sep { color: var(--color-muted); font-weight: 400; }

.evento-creado {
    font-size: .75rem;
    color: var(--color-muted);
    margin-top: .25rem;
    margin-bottom: 1rem;
}

.evento-acciones-grupo {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 0.5px solid var(--color-border);
}
.evento-acciones-grupo .btn { flex: 1 1 auto; justify-content: center; text-align: center; }

/* --- Compartir -------------------------------------------- */
.compartir-section {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 0.5px solid var(--color-border);
}
.compartir-titulo { font-size: .95rem; font-weight: 700; color: var(--color-text); margin-bottom: .25rem; }
.compartir-sub { font-size: .8rem; color: var(--color-text-light); margin-bottom: .75rem; }

/* URL box con Copiar inline */
.url-box {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--color-bg);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: .55rem .75rem;
    margin-bottom: .6rem;
}
.url-box i { color: var(--color-text-light); flex-shrink: 0; font-size: .85rem; }
.url-text {
    font-family: 'DM Mono', monospace;
    font-size: .75rem;
    color: var(--color-muted);
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.btn-copy {
    font-size: .75rem;
    font-weight: 700;
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: inherit;
    transition: background .15s;
}
.btn-copy:hover { background: #ede9fe; }

.compartir-botones { display: flex; gap: .6rem; flex-wrap: wrap; }
.compartir-botones .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
.compartir-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--color-primary);
    color: #fff;
    font-size: .75rem;
    padding: .2rem .6rem;
    border-radius: 999px;
}

/* --- Auth ------------------------------------------------- */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #ede9fe 0%, #f8f8f6 50%, #dcfce7 100%);
}

.auth-container {
    background: #fff;
    border-radius: calc(var(--radius) * 2);
    box-shadow: var(--shadow-md);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 420px;
}

.auth-logo   { font-size: 3rem; text-align: center; margin-bottom: .5rem; }
.auth-title  { font-size: 1.4rem; font-weight: 800; text-align: center; color: var(--color-primary); }
.auth-subtitle { font-size: 1rem; text-align: center; color: var(--color-muted); margin-bottom: 1.5rem; }
.auth-form   { margin-top: 1rem; }
.auth-link   { text-align: center; font-size: .875rem; margin-top: 1.25rem; color: var(--color-muted); }

/* --- Login 2-panel ---------------------------------------- */
.login-body { background: #f0f0ee;       /* fondo que rodea la card */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem; }

.login-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 860px;          /* ← esto resuelve el problema */
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: .5px solid #e0e0de;
}

/* Left decorative panel */
.login-left {
    background: #0f0f0f;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
}

.login-grid-deco {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .04;
}

.lp-top {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.lp-top .svg-icon { font-size: 1rem; }

.lp-brand { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: -.1px; }

.lp-center { display: flex; flex-direction: column; gap: 1.5rem; position: relative; }

.lp-headline {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -.8px;
}

.lp-headline em { font-style: normal; color: #8b7ffc; }

.lp-sub { font-size: 13px; color: #6b6b6b; line-height: 1.6; max-width: 220px; }

.lp-stats { display: flex; flex-direction: column; gap: 8px; }

.lp-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1a1a1a;
    border-radius: 10px;
    padding: 10px 14px;
}

.lp-stat-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.lp-stat-dot.purple { background: #8b7ffc; }
.lp-stat-dot.green  { background: #a5f3d0; }
.lp-stat-dot.amber  { background: #fbbf24; }
.lp-stat-text { font-size: 11px; font-weight: 600; color: #6b6b6b; }
.lp-stat-val  { font-family: 'DM Mono', monospace; font-size: 11px; color: #fff; margin-left: auto; }

.lp-bottom { font-size: 10px; color: #3d3d3d; letter-spacing: .04em; position: relative; }

/* Right form panel */
.login-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    background: #fff;
}

.login-form-wrap { width: 100%; max-width: 320px; }

.login-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2rem;
}

.login-logo .svg-icon { font-size: 1.375rem; }
.login-logo-text { font-size: 13px; font-weight: 700; color: #1a1a1a; }

.login-heading {
    font-size: 22px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -.5px;
    margin-bottom: 4px;
}

.login-subheading { font-size: 12px; color: #9e9e9b; margin-bottom: 2rem; line-height: 1.5; }

/* Campo overrides for login context */
.login-form-wrap .campo { margin-bottom: 1rem; }
.login-form-wrap .campo label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #b0b0ab;
    margin-bottom: 6px;
}
.login-form-wrap .campo input[type="email"],
.login-form-wrap .campo input[type="password"],
.login-form-wrap .campo input[type="text"] {
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
}

/* Password toggle */
.campo-pw { position: relative; }
.campo-pw input { padding-right: 42px !important; }
.toggle-pw {
    position: absolute;
    right: 12px;
    /*bottom: 50%;*/
    transform: translateY(50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #b0b0ab;
    padding: 4px;
    transition: color .15s;
    line-height: 0;
}
.toggle-pw:hover { color: #6b6b6b; }
.toggle-pw svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; display: block; }

.login-extra {
    display: flex;
    justify-content: flex-end;
    margin-top: -.25rem;
    margin-bottom: 1.5rem;
}

.login-forgot { font-size: 11px; font-weight: 600; color: #9e9e9b; }

.btn-login {
    width: 100%;
    padding: 12px;
    background: #1a1a1a;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Syne', sans-serif;
    cursor: pointer;
    transition: opacity .15s;
    letter-spacing: -.1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-login:hover { opacity: .85; }
.btn-login svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }

.login-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: .5px solid #f0f0ee;
    text-align: center;
    font-size: 11px;
    color: #b0b0ab;
    line-height: 1.7;
}
.login-footer a { color: #1a1a1a; font-weight: 700; text-decoration: none; }
.login-footer a:hover { color: #5b4ef8; }

@media (max-width: 600px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-left  { display: none; }
    .login-right { padding: 2rem 1.5rem; }
}

/* --- FullCalendar overrides ------------------------------- */
.fc .fc-toolbar-title { font-size: 1.1rem; font-weight: 700; }
.fc .fc-button-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: none;
}
.fc .fc-button-primary:hover { background: var(--color-primary-dk); border-color: var(--color-primary-dk); }
.fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--color-primary-dk); border-color: var(--color-primary-dk); }
.fc .fc-button-primary:focus { box-shadow: 0 0 0 3px rgba(99,102,241,.25); }
.fc .fc-daygrid-event { border-radius: 4px; font-size: .8rem; }
.fc .fc-event { cursor: pointer; }
.fc .fc-col-header-cell {
    background: #fafaf9;
    border-color: var(--color-border);
}
.fc .fc-col-header-cell-cushion {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #b0b0ab;
    text-decoration: none;
    padding: 10px 0;
    display: block;
}
.fc .fc-scrollgrid { border-color: var(--color-border); }
.fc td, .fc th { border-color: var(--color-border); }

/* Card sin padding extra cuando contiene calendario */
.card-cal { padding: .75rem; }

/* FullCalendar mobile */
@media (max-width: 768px) {
    .card-cal { padding: .4rem; }

    /* Toolbar: título más pequeño, botones compactos */
    .fc .fc-toolbar { gap: .4rem; }
    .fc .fc-toolbar-title { font-size: .95rem; }
    .fc .fc-button { padding: .3rem .55rem; font-size: .8rem; }
    .fc .fc-button-group .fc-button { padding: .3rem .45rem; }

    /* Grid mensual: cabeceras y números más pequeños */
    .fc .fc-col-header-cell-cushion {
        font-size: .72rem;
        padding: 3px 2px;
    }
    .fc .fc-daygrid-day-number {
        font-size: .72rem;
        padding: 2px 4px;
    }
    .fc .fc-daygrid-event { font-size: .72rem; }

    /* Grid semanal: filas más compactas */
    .fc .fc-timegrid-slot { height: 1.75rem; }
    .fc .fc-timegrid-slot-label { font-size: .7rem; }

    /* Lista semanal (listWeek en mobile) */
    .fc .fc-list-event-title a { font-size: .88rem; }
    .fc .fc-list-day-text,
    .fc .fc-list-day-side-text { font-size: .82rem; }
    .fc .fc-list-event td { padding: .5rem .5rem; }
}

/* --- Búsqueda --------------------------------------------- */
.pagina-header {
    margin-bottom: 1.25rem;
}
.pagina-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
}

.buscar-card { margin-bottom: 1.5rem; }

.buscar-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.buscar-fila-principal {
    display: flex;
    gap: .75rem;
    align-items: center;
}

.buscar-input-wrap {
    position: relative;
    flex: 1;
}

.buscar-icono {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    pointer-events: none;
    line-height: 1;
}

.buscar-input {
    width: 100%;
    padding: .6rem .85rem .6rem 2.4rem;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-family: inherit;
    color: var(--color-text);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.buscar-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(91,78,248,.15);
}

.buscar-filtros {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.buscar-filtros .campo {
    margin-bottom: 0;
    min-width: 130px;
}

.buscar-select {
    width: 100%;
    padding: .55rem .8rem;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-family: inherit;
    color: var(--color-text);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.buscar-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(91,78,248,.15);
}

.buscar-limpiar { align-self: flex-end; white-space: nowrap; }

.buscar-resultados-header {
    display: flex;
    align-items: center;
    margin-bottom: .75rem;
    padding: 0 .25rem;
}

.buscar-contador {
    font-size: .875rem;
    color: var(--color-muted);
    font-weight: 500;
}

.buscar-contador strong { color: var(--color-text); }

.vacio { color: var(--color-muted); text-align: center; padding: 2rem; }

@media (max-width: 768px) {
    .buscar-fila-principal {
        flex-direction: column;
        align-items: stretch;
    }
    .buscar-fila-principal .btn { width: 100%; justify-content: center; }
    .buscar-filtros { flex-direction: column; }
    .buscar-filtros .campo { min-width: unset; width: 100%; }
}

/* --- Responsive mobile ------------------------------------ */
@media (max-width: 768px) {

    /* Navbar: menú hamburguesa */
    .navbar { padding: .75rem 1rem; position: relative; }
    .navbar-toggle { display: flex; }

    .navbar-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(255,255,255,.98);
        backdrop-filter: blur(8px);
        border-bottom: 0.5px solid var(--color-border);
        box-shadow: 0 8px 24px rgba(26,26,26,.08);
        padding: .5rem 1rem .75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        z-index: 99;
    }
    .navbar-links.open { display: flex; }

    .navbar-center a {
        width: 100%;
        padding: .6rem .5rem;
        border-radius: 0;
        border-bottom: 0.5px solid var(--color-border);
    }
    .navbar-center a:last-child { border-bottom: none; }

    .navbar-avatar {
        width: 100%;
        padding: .6rem .5rem;
        border-bottom: 0.5px solid var(--color-border);
        margin-left: 0;
    }
    .navbar-avatar-name { display: block; }

    .navbar-right .btn-nuevo {
        width: 100%;
        justify-content: center;
        margin: .25rem 0;
    }

    /* Contenedor con menos padding lateral */
    .contenedor { padding: 1rem .75rem 2.5rem; }

    /* Cabecera de página */
    .pagina-header { flex-wrap: wrap; gap: .5rem; }
    .pagina-header h2 { font-size: 1.15rem; }

    /* Navegador de fechas */
    .nav-fechas { gap: .4rem; }
    .nav-fechas .btn { padding: .4rem .65rem; font-size: .82rem; }
    .fecha-actual { font-size: .95rem; }

    /* Cards de eventos: stack vertical */
    .evento-item {
        flex-wrap: wrap;
        gap: .5rem .75rem;
        padding: .75rem;
    }
    .evento-hora {
        min-width: unset;
        width: 100%;
        font-size: .78rem;
        color: var(--color-muted);
        border-bottom: 0.5px solid var(--color-border);
        padding-bottom: .35rem;
        margin-bottom: .1rem;
    }
    .evento-info { flex: 1 1 0; min-width: 0; }
    .evento-estado { flex: 0 0 auto; }

    /* Acciones de evento */
    .evento-acciones-grupo { flex-direction: column; }
    .evento-acciones-grupo .btn { width: 100%; }
    .evento-detalle-info { grid-template-columns: 1fr; }

    /* Compartir */
    .compartir-botones { flex-direction: column; }
    .compartir-botones .btn { width: 100%; }
}

@media (max-width: 480px) {
    .nav-fechas .btn span { display: none; } /* ocultar texto, dejar solo flecha */
    .form-acciones { flex-direction: column; }
    .form-acciones .btn { width: 100%; justify-content: center; }
}

/* --- Footer ----------------------------------------------- */
.pie {
    text-align: center;
    font-size: .8rem;
    color: var(--color-muted);
    padding: 1.25rem 1rem;
    border-top: 0.5px solid var(--color-border);
    background: rgba(255,255,255,.9);
    letter-spacing: .01em;
}

/* ═══════════════════════════════════════════════════════════
   Vista diaria v2
   ═══════════════════════════════════════════════════════════ */

/* ── Encabezado del día ─────────────────────────────────── */
.dia-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 1.5rem 0 1rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
}
.dia-cabecera-izq { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; flex: 1; min-width: 0; }
.dia-numero { font-family: 'Inter', sans-serif; font-size: 3rem; font-weight: 900; line-height: 1; color: var(--color-text); }
.dia-texto  { font-size: .9rem; font-weight: 700; color: var(--color-muted); letter-spacing: .04em; }
.dia-cabecera-der { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.dia-stats  { font-size: .85rem; color: var(--color-muted); font-weight: 500; }

/* ── Barra de navegación ────────────────────────────────── */
.dia-nav { display: flex; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.btn-nuevo-dia { margin-left: auto; }

/* ── Lista v2 ───────────────────────────────────────────── */
.lista-eventos-v2 { display: flex; flex-direction: column; gap: .65rem; }

.evento-item-v2 {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow .15s;
}
.evento-item-v2:hover { box-shadow: var(--shadow-md); }
.evento-v2-vencido { border-color: var(--color-danger); }

/* ── Bloque de hora coloreado ───────────────────────────── */
.ev-hora-bloque {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    width: 80px;
    padding: .75rem .4rem;
    color: #fff;
    font-weight: 700;
    line-height: 1.20;
    text-align: center;
    flex-shrink: 0;
}
.evento-v2-pendiente  .ev-hora-bloque { background: var(--color-primary); }
.evento-v2-completado .ev-hora-bloque { background: #9ca3af; }
.evento-v2-vencido    .ev-hora-bloque { background: var(--color-danger); }

.ev-hora-txt  { font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 900; }
.ev-hora-ampm { font-size: .80rem; font-weight: 600; opacity: .85; text-transform: uppercase; }
.ev-hora-todo { font-size: .65rem; font-weight: 700; letter-spacing: .03em; line-height: 1.3; }
.ev-fecha-dia { font-size: 1.5rem; font-weight: 800; }
.ev-fecha-mes { font-size: .7rem; font-weight: 600; opacity: .9; text-transform: capitalize; }

/* ── Cuerpo del evento ──────────────────────────────────── */
.ev-cuerpo { flex: 1; padding: .8rem 1rem; min-width: 0; }

.ev-titulo {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    color: var(--color-text);
    text-decoration: none;
}
.ev-titulo:hover { text-decoration: underline; }
.evento-v2-completado .ev-titulo { text-decoration: line-through; color: var(--color-muted); }

.ev-desc {
    font-size: .82rem;
    color: var(--color-muted);
    margin-top: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Badge de estado */
.ev-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .45rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
}
.ev-badge-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.evento-v2-pendiente  .ev-badge { color: #3730a3; }
.evento-v2-pendiente  .ev-badge-dot { background: var(--color-primary); }
.evento-v2-completado .ev-badge { color: #475569; }
.evento-v2-completado .ev-badge-dot { background: #9ca3af; }
.evento-v2-vencido    .ev-badge { color: #9f1239; }
.evento-v2-vencido    .ev-badge-dot { background: var(--color-danger); }

/* ── Acciones: botón Completar + chevron ────────────────── */
.ev-acciones {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    flex-shrink: 0;
}

.btn-completar {
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
    border-radius: var(--radius);
    padding: .35rem .85rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
    font-family: inherit;
}
.btn-completar:hover { background: var(--color-primary); color: #fff; }

.ev-chevron {
    color: var(--color-muted);
    font-size: .9rem;
    padding: .25rem .1rem;
    text-decoration: none;
    line-height: 1;
}
.ev-chevron:hover { color: var(--color-primary); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .dia-numero { font-size: 2.4rem; }
    .dia-texto  { font-size: .72rem; }
    .ev-hora-bloque { min-width: 64px; width: 64px; }
    .ev-hora-txt { font-size: 1.1rem; }
    .ev-fecha-dia { font-size: 1.2rem; }
    .btn-completar { padding: .3rem .5rem; font-size: .75rem; }
    .ev-cuerpo { padding: .65rem .75rem; }
    /* Nav: botones sin texto, ocupan todo el ancho */
    .nav-txt { display: none; }
    .dia-nav { gap: .35rem; }
    .dia-nav .btn { flex: 1; justify-content: center; }
    .btn-nuevo-dia { margin-left: 0; line-height: 1.1; }
}

/* ═══════════════════════════════════════════════════════════
   Vista mensual — calendar grid
   ═══════════════════════════════════════════════════════════ */

/* ── Toolbar ─────────────────────────────────────────────── */
.cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0 2px;
}

.cal-nav { display: flex; align-items: center; gap: 6px; }

.btn-nav {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: 0.5px solid var(--color-border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b6b6b;
    transition: background .15s, border-color .15s, color .15s;
    text-decoration: none;
    flex-shrink: 0;
}
.btn-nav:hover { background: #f5f5f3; border-color: #d8d8d5; color: #1a1a1a; text-decoration: none; }
.btn-nav svg { width: 14px; height: 14px; display: block; }

.btn-hoy {
    font-size: .6875rem;
    font-weight: 700;
    color: #6b6b6b;
    letter-spacing: .03em;
    padding: 6px 12px;
    border-radius: 8px;
    border: 0.5px solid var(--color-border);
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: background .15s, color .15s;
    display: inline-flex;
    align-items: center;
}
.btn-hoy:hover { background: #f5f5f3; color: #1a1a1a; text-decoration: none; }

.cal-titulo {
    font-size: .9375rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -.015em;
    text-transform: capitalize;
}

.view-switcher {
    display: flex;
    border: 0.5px solid var(--color-border);
    border-radius: 9px;
    overflow: hidden;
    background: #f8f8f6;
}
.vs-btn {
    font-size: .6875rem;
    font-weight: 600;
    padding: 6px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #6b6b6b;
    font-family: inherit;
    transition: background .15s, color .15s;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.vs-btn.active {
    background: #1a1a1a;
    color: #fff;
    border-radius: 7px;
    margin: 2px;
    padding: 4px 12px;
}
.vs-btn:hover:not(.active) { color: #1a1a1a; text-decoration: none; }

/* ── Grid wrapper ────────────────────────────────────────── */
.cal-wrap {
    border: 0.5px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
}

/* ── Day headers ─────────────────────────────────────────── */
.cal-head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 0.5px solid var(--color-border);
    background: #fafaf9;
}
.ch {
    padding: 10px 0;
    text-align: center;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #b0b0ab;
}

/* ── Day cells ───────────────────────────────────────────── */
.cal-body { display: grid; grid-template-columns: repeat(7, 1fr); }

.day {
    min-height: 90px;
    border-right: 0.5px solid var(--color-border);
    border-bottom: 0.5px solid var(--color-border);
    padding: 8px 6px 6px;
    transition: background .12s;
    position: relative;
    overflow: hidden;
}
.day:nth-child(7n) { border-right: none; }
.day:hover { background: #fafaf9; }

.day-num {
    font-family: 'DM Mono', monospace;
    font-size: .75rem;
    font-weight: 500;
    color: #b0b0ab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    margin-bottom: 4px;
    transition: background .12s, color .12s;
    text-decoration: none;
    line-height: 1;
}
a.day-num:hover { color: #6b6b6b; text-decoration: none; }

.day.day-today .day-num { background: #1a1a1a; color: #fff; font-weight: 700; }
.day.otro-mes { background: #fefefe; }
.day.otro-mes:hover { background: #fafaf9; }
.day.otro-mes .day-num { color: #d8d8d5; }
.day.day-weekend:not(.day-today) .day-num { color: #c4c4c0; }

/* ── Event pills ─────────────────────────────────────────── */
.ev {
    border-radius: 5px;
    padding: 3px 6px;
    font-size: .625rem;
    font-weight: 600;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: opacity .12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-decoration: none;
    line-height: 1.3;
}
.ev:hover { opacity: .8; text-decoration: none; }
.ev-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }

.ev-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

.ev-pendiente  { background: #ede9fe; color: #3c3489; }
.ev-pendiente  .ev-dot { background: var(--color-primary); }
.ev-vencido    { background: #fee2e2; color: #791f1f; }
.ev-vencido    .ev-dot { background: #e24b4a; }
.ev-completado { background: #f1efea; color: #888780; }
.ev-completado .ev-dot { background: #b4b2a9; }

.ev-time {
    font-family: 'DM Mono', monospace;
    font-size: .5625rem;
    font-weight: 500;
    opacity: .7;
    flex-shrink: 0;
}

.more {
    font-size: .5625rem;
    font-weight: 700;
    color: #b0b0ab;
    letter-spacing: .04em;
    padding: 1px 4px;
    display: block;
    text-decoration: none;
}
.more:hover { color: #6b6b6b; text-decoration: none; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .cal-toolbar { flex-wrap: wrap; gap: .6rem; }
    .cal-titulo  { order: -1; width: 100%; text-align: center; }
    .cal-nav     { flex: 1; }
    .view-switcher { flex: 1; justify-content: flex-end; }
    .day { min-height: 60px; padding: 5px 3px 3px; }
    .ev  { display: none; }
    .ev:first-of-type { display: flex; }
    .more { display: none; }
}

@media (max-width: 480px) {
    .ch { font-size: .5rem; letter-spacing: .04em; padding: 7px 0; }
    .day-num { width: 20px; height: 20px; font-size: .65rem; }
    .vs-btn { padding: 5px 8px; }
    .vs-btn.active { padding: 3px 6px; }
}

/* ── Tabla de usuarios ───────────────────────────────────── */
.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.tabla th {
    text-align: left;
    padding: .6rem 1rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-text-light);
    border-bottom: 0.5px solid var(--color-border);
    background: #fafaf9;
}
.tabla td {
    padding: .75rem 1rem;
    border-bottom: 0.5px solid var(--color-border);
    vertical-align: middle;
    color: var(--color-text);
}
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: #fafaf9; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.badge-admin   { background: #ede9fe; color: var(--color-primary); }
.badge-usuario { background: #f5f5f3; color: var(--color-muted); }

@media (max-width: 640px) {
    /* Outer card wrapper desaparece; las filas se convierten en cards */
    .tabla-container {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .tabla thead { display: none; }

    .tabla tbody tr {
        display: block;
        background: var(--color-card);
        border: 0.5px solid var(--color-border);
        border-radius: var(--radius);
        margin-bottom: .6rem;
        padding: .65rem .9rem;
        box-shadow: var(--shadow);
    }
    .tabla tbody tr:hover { background: var(--color-card); }

    .tabla tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .4rem 0;
        border-bottom: 0.5px solid var(--color-border);
        font-size: .875rem;
    }
    .tabla tbody td:last-child {
        border-bottom: none;
        justify-content: flex-end;
        padding-top: .6rem;
    }

    .tabla tbody td::before {
        content: attr(data-label);
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--color-text-light);
        margin-right: .75rem;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .tabla tbody td:last-child::before { display: none; }

    /* Email: permite que se rompa en pantallas muy pequeñas */
    .td-email {
        word-break: break-all;
        align-items: flex-start;
    }
}