/* ============================================================
   DENTAL CENTER - ESTILOS GLOBALES
   Sprints 1, 2, 3 y 4
   ============================================================ */

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

:root {
    --navy:       #1B3A6B;
    --blue:       #1F5FB4;
    --blue-light: #EEF3FB;
    --teal:       #0F6E56;
    --danger:     #C0392B;
    --gray-dark:  #333333;
    --gray:       #666666;
    --gray-light: #F5F7FB;
    --white:      #FFFFFF;
    --border:     #D0D7E6;
    --shadow:     0 4px 24px rgba(27,58,107,0.10);
    --radius:     10px;
    --font:       'Segoe UI', Arial, sans-serif;
}

body { font-family: var(--font); background: var(--gray-light); color: var(--gray-dark); min-height: 100vh; }

/* ── SPRINT 1: LOGIN ─────────────────────────────────────── */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
    padding: 1rem;
}
.login-card { background: var(--white); border-radius: 16px; box-shadow: var(--shadow); width: 100%; max-width: 420px; overflow: hidden; }
.login-header { background: var(--navy); padding: 2rem 2rem 1.5rem; text-align: center; }
.login-header .logo-icon { width: 56px; height: 56px; background: rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; font-size: 1.8rem; }
.login-header h1 { color: var(--white); font-size: 1.3rem; font-weight: 700; margin-bottom: .2rem; }
.login-header p  { color: rgba(255,255,255,0.65); font-size: .85rem; }
.login-body  { padding: 2rem; }
.login-footer { text-align: center; padding: 1rem 2rem 1.5rem; font-size: .8rem; color: var(--gray); border-top: 1px solid var(--border); }

.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-size: .85rem; font-weight: 600; color: var(--navy); margin-bottom: .4rem; }
.input-wrap { position: relative; }
.input-wrap .input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gray); font-size: 1rem; pointer-events: none; }
.form-control { width: 100%; padding: .7rem .9rem .7rem 2.6rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: .95rem; font-family: var(--font); color: var(--gray-dark); background: var(--white); transition: border-color .2s, box-shadow .2s; outline: none; }
.form-control:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,95,180,0.12); }

.btn-primary { width: 100%; padding: .8rem; background: var(--navy); color: var(--white); border: none; border-radius: var(--radius); font-size: 1rem; font-weight: 600; font-family: var(--font); cursor: pointer; transition: background .2s, transform .1s; margin-top: .5rem; }
.btn-primary:hover  { background: var(--blue); }
.btn-primary:active { transform: scale(.98); }

.alert { padding: .75rem 1rem; border-radius: var(--radius); font-size: .9rem; margin-bottom: 1.2rem; display: flex; align-items: center; gap: .5rem; }
.alert-danger  { background: #FDECEA; color: var(--danger); border: 1px solid #F5C6C2; }
.alert-success { background: #E8F8F2; color: var(--teal); border: 1px solid #B2DFCC; }
.alert-warning { background: #FFF3CD; color: #856404; border: 1px solid #ffe69c; }

/* ── SPRINT 1: TOPBAR ───────────────────────────────────── */
.topbar { background: var(--navy); color: var(--white); padding: 0 1.5rem; height: 60px; display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.topbar-brand  { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
.topbar-home   { color: var(--white); text-decoration: none; }
.topbar-center { font-size: .95rem; color: rgba(255,255,255,.8); }
.topbar-user   { display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
.topbar-user .rol-badge { background: rgba(255,255,255,0.15); padding: 3px 10px; border-radius: 20px; font-size: .78rem; }
.topbar-user a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: .85rem; transition: color .2s; }
.topbar-user a:hover { color: var(--white); }

/* ── SPRINT 1: DASHBOARD ────────────────────────────────── */
.dashboard-body { margin-top: 60px; padding: 2rem; }
.welcome-card { background: var(--white); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); border-left: 5px solid var(--navy); }
.welcome-card h2 { color: var(--navy); font-size: 1.4rem; margin-bottom: .4rem; }
.welcome-card p  { color: var(--gray); font-size: .95rem; }
.modules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; margin-top: 1.5rem; }
.module-card { background: var(--white); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); text-decoration: none; color: var(--gray-dark); transition: transform .2s, box-shadow .2s; border-top: 4px solid var(--blue); text-align: center; }
.module-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(27,58,107,0.15); }
.module-card .module-icon { font-size: 2rem; margin-bottom: .75rem; }
.module-card h3 { font-size: 1rem; color: var(--navy); margin-bottom: .3rem; }
.module-card p  { font-size: .82rem; color: var(--gray); }

/* ── SPRINT 1: ACCESO DENEGADO ──────────────────────────── */
.error-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--gray-light); }
.error-card { background: var(--white); border-radius: 16px; padding: 3rem 2.5rem; text-align: center; max-width: 400px; box-shadow: var(--shadow); }
.error-card .error-icon { font-size: 3.5rem; margin-bottom: 1rem; }
.error-card h2 { color: var(--danger); margin-bottom: .5rem; }
.error-card p  { color: var(--gray); font-size: .95rem; margin-bottom: 1.5rem; }
.error-card a  { display: inline-block; padding: .6rem 1.5rem; background: var(--navy); color: var(--white); border-radius: var(--radius); text-decoration: none; font-size: .9rem; transition: background .2s; }
.error-card a:hover { background: var(--blue); }

/* ── SPRINT 2: LAYOUT CON SIDEBAR ──────────────────────── */
.layout-wrap { display: flex; margin-top: 60px; min-height: calc(100vh - 60px); }
.sidebar { width: 230px; background: var(--white); border-right: 1px solid var(--border); padding: 1.2rem 0; position: fixed; top: 60px; left: 0; bottom: 0; overflow-y: auto; z-index: 90; }
.sidebar-menu { list-style: none; }
.sidebar-menu a { display: block; padding: .65rem 1.3rem; color: var(--gray-dark); text-decoration: none; font-size: .9rem; border-left: 3px solid transparent; transition: all .15s; }
.sidebar-menu a:hover  { background: var(--blue-light); color: var(--blue); }
.sidebar-menu a.active { background: var(--blue-light); color: var(--navy); border-left-color: var(--navy); font-weight: 600; }
.sidebar-divider { height: 1px; background: var(--border); margin: .6rem 1rem; }
.sidebar-label  { padding: .4rem 1.3rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gray); }
.sidebar-back   { padding: 1rem 1.3rem; border-top: 1px solid var(--border); margin-top: .5rem; }
.sidebar-back a { font-size: .85rem; color: var(--gray); text-decoration: none; }
.sidebar-back a:hover { color: var(--navy); }
.main-content { margin-left: 230px; padding: 1.8rem; flex: 1; }

/* ── SPRINT 2: PAGE HEADER ──────────────────────────────── */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.4rem; flex-wrap: wrap; gap: .75rem; }
.page-title  { font-size: 1.4rem; font-weight: 700; color: var(--navy); margin: 0; }
.page-sub    { color: var(--gray); font-size: .9rem; margin: .2rem 0 0; }

/* ── SPRINT 2: CARDS ────────────────────────────────────── */
.card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 1.2rem; }
.card-title { font-weight: 600; font-size: 1rem; color: var(--navy); padding: 1rem 1.2rem .5rem; border-bottom: 1px solid var(--border); margin-bottom: .5rem; }
.form-card  { padding: 1.5rem; }

/* ── SPRINT 2: BUTTONS ──────────────────────────────────── */
.btn { display: inline-flex; align-items: center; padding: .55rem 1.1rem; border-radius: var(--radius); font-size: .9rem; font-weight: 600; cursor: pointer; text-decoration: none; border: none; transition: all .2s; }
.btn-primary   { background: var(--navy);  color: var(--white); }
.btn-primary:hover   { background: var(--blue); }
.btn-secondary { background: var(--blue-light); color: var(--navy); }
.btn-secondary:hover { background: #dde6f5; }
.btn-warning   { background: #FFF3CD; color: #856404; }
.btn-warning:hover   { background: #ffe69c; }
.btn-danger    { background: #FDECEA; color: var(--danger); }
.btn-danger:hover    { background: #f8d7da; }
.btn-ghost     { background: transparent; color: var(--gray); border: 1.5px solid var(--border); }
.btn-ghost:hover     { background: var(--gray-light); }
.btn-info      { background: var(--blue-light); color: var(--blue); }
.btn-lg        { padding: .8rem 1.5rem; font-size: 1rem; }
.btn-sm        { padding: .3rem .75rem; font-size: .82rem; border-radius: 6px; cursor: pointer; border: none; font-weight: 600; }
.btn-sm.btn-info    { background: var(--blue-light); color: var(--blue); }
.btn-sm.btn-warning { background: #FFF3CD; color: #856404; }
.btn-sm.btn-success { background: #d1f2e4; color: #0a5c36; }
.btn-sm.btn-danger  { background: #FDECEA; color: var(--danger); }
.btn-block { width: 100%; justify-content: center; }

/* ── SPRINT 2: BADGES ───────────────────────────────────── */
.badge         { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: .78rem; font-weight: 600; }
.badge-success { background: #d1f2e4; color: #0a5c36; }
.badge-danger  { background: #FDECEA; color: var(--danger); }
.badge-warning { background: #FFF3CD; color: #856404; }
.badge-info    { background: var(--blue-light); color: var(--blue); }

/* ── SPRINT 2: FORMS ────────────────────────────────────── */
.form-section-title { font-weight: 600; color: var(--navy); font-size: .95rem; margin-bottom: .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }
.form-grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group   { display: flex; flex-direction: column; }
.form-group label { font-size: .85rem; font-weight: 600; color: var(--navy); margin-bottom: .35rem; }
.form-control { padding: .6rem .85rem; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: .93rem; font-family: var(--font); color: var(--gray-dark); transition: border-color .2s; outline: none; }
.form-control:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(31,95,180,.1); }
.select-sm    { padding: .5rem .7rem; }
.form-actions { margin-top: 1.5rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.checkbox-label { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--gray-dark); cursor: pointer; }
.required { color: var(--danger); }
textarea.form-control { resize: vertical; min-height: 70px; }

/* ── SPRINT 2: ALERTS ───────────────────────────────────── */
.alert        { padding: .75rem 1rem; border-radius: var(--radius); font-size: .9rem; margin-bottom: 1rem; }
.alert-danger  { background: #FDECEA; color: var(--danger); border: 1px solid #f5c6c2; }
.alert-success { background: #d1f2e4; color: #0a5c36; border: 1px solid #a3e4c1; }
.alert-warning { background: #FFF3CD; color: #856404; border: 1px solid #ffe69c; }

/* ── SPRINT 2: DATA TABLE ───────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table th { background: var(--gray-light); color: var(--navy); padding: .65rem 1rem; text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.data-table td { padding: .65rem 1rem; border-top: 1px solid var(--border); color: var(--gray-dark); }
.data-table tbody tr:hover td { background: var(--blue-light); }
.acciones { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ── SPRINT 2: DETAIL TABLE ─────────────────────────────── */
.detail-table { width: 100%; font-size: .92rem; padding: .5rem 1rem 1rem; }
.detail-table th { color: var(--navy); font-weight: 600; padding: .5rem .75rem; text-align: left; width: 38%; }
.detail-table td { color: var(--gray-dark); padding: .5rem .75rem; }
.detail-table tr:nth-child(even) td, .detail-table tr:nth-child(even) th { background: var(--gray-light); }

/* ── SPRINT 2: FILTROS ──────────────────────────────────── */
.filtros-bar  { margin-bottom: 1.2rem; }
.filtros-form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.search-input { max-width: 280px; }

/* ── SPRINT 2: ASISTENCIA ───────────────────────────────── */
.asistencia-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.asistencia-card   { padding: 1.5rem; }
.asistencia-estado { text-align: center; padding: 1.2rem; margin-bottom: 1rem; }
.estado-icon       { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.asistencia-detalle { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: .75rem; font-size: .95rem; }
.resumen-semana { display: flex; gap: 1rem; justify-content: space-around; flex-wrap: wrap; padding: 1rem; }
.resumen-item   { text-align: center; }
.resumen-valor  { display: block; font-size: 1.6rem; font-weight: 700; color: var(--navy); }
.resumen-label  { font-size: .8rem; color: var(--gray); }

/* ── SPRINT 2: STATS ────────────────────────────────────── */
.stats-row { display: flex; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.stat-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.5rem; text-align: center; flex: 1; min-width: 130px; }
.stat-card.stat-warning { border-top: 3px solid #ffc107; }
.stat-valor { display: block; font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.stat-label { font-size: .82rem; color: var(--gray); }

/* ── SPRINT 2: PROFILE GRID ─────────────────────────────── */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

/* ── SPRINT 2: EMPTY STATE ──────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--gray); }
.empty-icon  { font-size: 2.5rem; display: block; margin-bottom: .75rem; }

/* ── SPRINT 2: TEXT HELPERS ─────────────────────────────── */
.text-success { color: var(--teal) !important; }
.text-warning { color: #856404 !important; }
.text-danger  { color: var(--danger) !important; }
.text-muted   { color: var(--gray) !important; }

/* ── SPRINT 2: INFO BOX ─────────────────────────────────── */
.info-box { background: var(--blue-light); border: 1px solid #c5d8f5; border-radius: var(--radius); padding: .85rem 1.1rem; font-size: .9rem; color: var(--navy); margin-top: 1rem; }
.info-box a { color: var(--blue); font-weight: 600; text-decoration: none; }
.info-box a:hover { text-decoration: underline; }

/* ── SPRINT 3: INVENTARIO ───────────────────────────────── */
.stock-badge   { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: .82rem; font-weight: 600; }
.stock-ok      { background: #d1f2e4; color: #0a5c36; }
.stock-bajo    { background: #fff3cd; color: #856404; }
.stock-agotado { background: #fdecea; color: var(--danger); }
.row-alerta td { background: #fffbf0 !important; }

/* ── SPRINT 4: EXPEDIENTES ──────────────────────────────── */
.consulta-card   { border: 1px solid var(--border); border-radius: var(--radius); margin: .75rem 1rem; overflow: hidden; }
.consulta-header { background: var(--gray-light); padding: .65rem 1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .88rem; }
.consulta-body   { padding: .75rem 1rem; font-size: .92rem; color: var(--gray-dark); }
.consulta-body div { margin-bottom: .4rem; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .sidebar       { display: none; }
    .main-content  { margin-left: 0; padding: 1rem; }
    .form-grid-2   { grid-template-columns: 1fr; }
    .asistencia-grid, .profile-grid { grid-template-columns: 1fr; }
    .stats-row     { flex-direction: column; }
}

/* ── Módulo Laboratorio ──────────────────────────────────────── */
.lab-timeline { display: flex; flex-direction: column; gap: .75rem; padding: .5rem 0; }
.lab-step { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; border-radius: var(--radius); border: 1.5px solid var(--border); background: var(--gray-light); }
.lab-step.step-done { background: #E8F8F2; border-color: #a3e4c1; }
.step-icon { font-size: 1.4rem; width: 36px; text-align: center; flex-shrink: 0; }
.step-info { display: flex; flex-direction: column; }
.step-info strong { font-size: .9rem; color: var(--navy); }
.step-info span   { font-size: .82rem; color: var(--gray); }