/* ===== Identidad visual (cambiá estos tokens para re-marcar la plataforma) ===== */
:root {
    --marca: #0f5e5a;          /* verde petróleo */
    --marca-oscura: #0a403d;
    --acento: #c8323a;         /* rojo */
    --fondo: #f4f6f5;
    --texto-suave: #5f6b6a;
    --bs-primary: #0f5e5a;
    --bs-primary-rgb: 15, 94, 90;
    --bs-link-color: #0f5e5a;
    --bs-link-hover-color: #0a403d;
}
body { background: var(--fondo); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.btn-primary { --bs-btn-bg: var(--marca); --bs-btn-border-color: var(--marca); --bs-btn-hover-bg: var(--marca-oscura); --bs-btn-hover-border-color: var(--marca-oscura); --bs-btn-active-bg: var(--marca-oscura); }
.btn-outline-primary { --bs-btn-color: var(--marca); --bs-btn-border-color: var(--marca); --bs-btn-hover-bg: var(--marca); --bs-btn-hover-border-color: var(--marca); }
.btn-acento { background: var(--acento); color: #fff; border-color: var(--acento); }
.btn-acento:hover { background: #a8272e; color: #fff; }
.text-marca { color: var(--marca) !important; }
.bg-marca { background: var(--marca) !important; color: #fff; }

/* ===== Navbar ===== */
.navbar-app { background: var(--marca); }
.navbar-app .navbar-brand, .navbar-app .nav-link { color: #fff !important; }
.navbar-app .nav-link { opacity: .85; font-size: .95rem; }
.navbar-app .nav-link:hover, .navbar-app .nav-link.active { opacity: 1; }
.navbar-app .nav-link.active { border-bottom: 2px solid #fff; }
.marca-logo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; letter-spacing: -.02em; }
.marca-logo .flor { width: 28px; height: 28px; }

/* ===== Tarjetas / KPIs ===== */
.card { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); border-radius: .75rem; }
.kpi { padding: 1rem 1.25rem; }
.kpi .valor { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.kpi .etiqueta { color: var(--texto-suave); font-size: .85rem; }
.page-title { font-weight: 700; letter-spacing: -.02em; margin: 1.25rem 0 1rem; }

/* ===== Agenda ===== */
.agenda-fila { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border-bottom: 1px solid #eef0ef; background: #fff; }
.agenda-fila:hover { background: #fafbfb; }
.agenda-hora { font-variant-numeric: tabular-nums; font-weight: 600; width: 56px; flex-shrink: 0; }
.agenda-libre .agenda-paciente { color: #9aa5a4; font-style: italic; }
.agenda-sobreturno { background: #fff8e6; }
.agenda-paciente { flex: 1; min-width: 0; }
.agenda-acciones { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: flex-end; }
.chip-hora { display: inline-block; margin: .2rem; }
.dia-cerrado { background: repeating-linear-gradient(45deg, #fff, #fff 10px, #f6f6f6 10px, #f6f6f6 20px); }

/* ===== Historia clínica ===== */
.evolucion { border-left: 4px solid var(--marca); background: #fff; padding: .9rem 1rem; border-radius: .5rem; margin-bottom: .75rem; }
.evolucion .meta { color: var(--texto-suave); font-size: .85rem; }
.evolucion.aclaracion { border-left-color: #f0ad4e; }
.dato-plantilla { display: inline-block; background: #eef5f4; border-radius: .35rem; padding: .1rem .5rem; margin: .15rem .25rem .15rem 0; font-size: .875rem; }
.paciente-header { background: #fff; border-radius: .75rem; padding: 1rem 1.25rem; }
.alergia { background: #fdecea; color: #a1262c; border-radius: .35rem; padding: .15rem .5rem; font-weight: 600; }

/* ===== Landing ===== */
.hero { background: linear-gradient(135deg, var(--marca) 0%, #13807a 60%, #1a9a8f 100%); color: #fff; padding: 5rem 0 4rem; position: relative; overflow: hidden; }
.hero h1 { font-weight: 800; letter-spacing: -.03em; font-size: clamp(2rem, 5vw, 3.4rem); }
.hero .lead { opacity: .92; }
.feature-icon { width: 46px; height: 46px; border-radius: 12px; background: #e6f2f1; color: var(--marca); display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.plan-card.destacado { outline: 3px solid var(--acento); }
.plan-precio { font-size: 2rem; font-weight: 800; }
.seccion { padding: 4rem 0; }
.tabla-comparativa td, .tabla-comparativa th { vertical-align: middle; }
.si { color: #198754; font-weight: 700; }
.no { color: #adb5bd; }

/* ===== Odontograma ===== */
.odonto-wrap { overflow-x: auto; background: #fff; border-radius: .75rem; padding: 1rem; }
.odonto-fila { display: flex; justify-content: center; gap: 2px; margin: 4px 0; }
.odonto-sep { width: 14px; }
.diente { text-align: center; font-size: 11px; color: #555; }
.diente svg { cursor: pointer; display: block; }
.diente svg polygon, .diente svg rect { stroke: #555; stroke-width: 1; fill: #fff; }
.herramienta.active { outline: 3px solid var(--marca); }

/* ===== Mobile ===== */
@media (max-width: 576px) {
    .agenda-fila { flex-wrap: wrap; }
    .agenda-acciones { width: 100%; justify-content: flex-start; }
    .kpi .valor { font-size: 1.5rem; }
    .hero { padding: 3rem 0 2.5rem; }
}

/* ===== Impresión ===== */
@media print {
    .no-print, .navbar, footer, .btn, .alert { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; }
}