/* ============================================================
   Paleta VetData — misma paleta que Vetdata.Web/la app MAUI, para
   que el portal profesional se sienta la misma marca. Se agregan
   solo un puñado de clases nuevas al final, propias del portal
   (badge "PRO", grillas de checkbox, tabla de disponibilidad).
   ============================================================ */
:root {
    --vet-navy: #0F5FA5;
    --vet-cyan: #2EB2E8;
    --vet-teal: #159E8C;
    --vet-bg-top: #EAF6FB;
    --vet-bg-bottom: #F7FBFD;
    --vet-field-bg: #F4F9FB;
    --vet-border: #DCEAF0;
    --vet-text: #2B3A42;
    --vet-text-muted: #7C8C96;
    --vet-text-placeholder: #B7C4CA;
    --vet-danger: #A32D2D;
    --vet-warning: #D68A1E;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100vh;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--vet-text);
    background: linear-gradient(180deg, var(--vet-bg-top) 0%, var(--vet-bg-bottom) 320px);
}

a { color: var(--vet-cyan); text-decoration: none; }

/* ── Layout con navegación (páginas autenticadas) — frame lateral, mismo
   patrón que Zook.Web: en pantallas angostas pasa a barra horizontal arriba. ─ */
.vet-shell { min-height: 100vh; display: flex; }

.vet-sidebar {
    background: #fff;
    border-right: 1px solid var(--vet-border);
    width: 216px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.vet-sidebar-logo { padding: 20px 20px 10px; text-align: center; }
.vet-sidebar-logo img { height: 104px; width: auto; display: inline-block; }
.vet-sidebar-logo .vet-portal-tag { display: inline-block; margin-top: 6px; }

.vet-nav { display: flex; flex-direction: column; gap: 3px; padding: 6px 12px; flex: 1; }

.vet-nav a {
    color: var(--vet-text-muted);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    display: block;
    white-space: nowrap;
}

.vet-nav a:hover { background: var(--vet-field-bg); }

.vet-nav a.active {
    background: var(--vet-navy);
    color: #fff;
}

.vet-sidebar-footer { padding: 14px 20px; border-top: 1px solid var(--vet-border); }

.vet-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.vet-content {
    flex: 1;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 28px 60px;
}

@media (max-width: 820px) {
    .vet-shell { flex-direction: column; }

    .vet-sidebar {
        width: 100%;
        height: auto;
        position: sticky;
        flex-direction: row;
        align-items: center;
        border-right: none;
        border-bottom: 1px solid var(--vet-border);
        overflow-x: auto;
    }

    .vet-sidebar-logo { padding: 8px 14px; }
    .vet-sidebar-logo img { height: 58px; }

    .vet-nav { flex-direction: row; flex-wrap: nowrap; padding: 6px 8px; }
    .vet-nav a { white-space: nowrap; }

    .vet-sidebar-footer { padding: 10px 14px; border-top: none; }
}

/* ── Layout vacío (login / registro) ─────────────────────────── */
.vet-empty-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* ── Componentes reutilizables (mismo lenguaje visual que la app) ─ */
.vet-card {
    background: #fff;
    border: 1px solid var(--vet-border);
    border-radius: 20px;
    padding: 28px;
}

.vet-muted { color: var(--vet-text-muted); }

.vet-field label {
    display: block;
    font-size: 13px;
    color: var(--vet-text-muted);
    margin-bottom: 6px;
}

.vet-field input:not([type="checkbox"]):not([type="radio"]), .vet-field select, .vet-field textarea {
    width: 100%;
    background: #fff;
    border: 1px solid var(--vet-border-strong, #B9CBD3);
    border-radius: 14px;
    padding: 13px 16px;
    font-size: 15px;
    color: var(--vet-text);
    font-family: inherit;
}

.vet-field input:not([type="checkbox"]):not([type="radio"]):focus, .vet-field select:focus, .vet-field textarea:focus {
    outline: none;
    border-color: var(--vet-teal);
    box-shadow: 0 0 0 3px rgba(0, 150, 170, 0.12);
}

/* Checkboxes/radios dentro de .vet-field (ej. lista de vacunas frecuentes en TemaVacunas.razor)
   no deben heredar el estilo de campo de texto de arriba (width:100%, padding, borde) — eso los
   convertía en cajas gigantes en vez de dejarlos como checkbox nativo alineado con su etiqueta. */
.vet-field input[type="checkbox"], .vet-field input[type="radio"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--vet-teal);
    margin: 0;
}

.vet-field textarea { resize: vertical; min-height: 80px; }

.vet-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%237C8C96'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
}

.vet-field input::placeholder { color: var(--vet-text-placeholder); }
.vet-field { margin-bottom: 16px; }

.vet-btn-primary {
    background: var(--vet-navy);
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 14px 20px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    width: 100%;
}

.vet-btn-primary:hover { filter: brightness(1.08); }
.vet-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.vet-btn-ghost {
    background: var(--vet-field-bg);
    color: var(--vet-navy);
    border: 1px solid var(--vet-border);
    border-radius: 14px;
    padding: 9px 16px;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
}

.vet-status-error { color: var(--vet-danger); font-size: 13.5px; margin: 10px 0; }
.vet-status-ok { color: var(--vet-teal); font-size: 13.5px; margin: 10px 0; }

.vet-login-card { width: 100%; max-width: 420px; }

.vet-login-logo {
    text-align: center;
    margin-bottom: 4px;
}
.vet-login-logo img { height: 112px; width: auto; }

.vet-login-sub {
    text-align: center;
    color: var(--vet-text-muted);
    font-size: 14px;
    margin-bottom: 24px;
}

/* ── Agenda: toggle Día/Semana + navegación de fecha ─────────── */
.vet-agenda-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.vet-agenda-nav .rango { font-weight: 700; font-size: 14.5px; flex: 1; min-width: 160px; }
.vet-agenda-navbtn {
    background: #fff; border: 1px solid var(--vet-border); border-radius: 10px;
    padding: 7px 12px; font-size: 13px; cursor: pointer; font-weight: 600;
}
.vet-agenda-navbtn:hover { background: var(--vet-field-bg); }

/* ── Agenda: vista semana (citas dentro de cal-tabla) ────────── */
.cal-tabla td.slot-cita { padding: 2px; vertical-align: top; }
.vet-cita-pill {
    display: block; border-radius: 6px; padding: 2px 5px; font-size: 10px;
    margin-bottom: 2px; cursor: pointer; text-align: left; line-height: 1.3; border: none; width: 100%;
}
.vet-cita-pill.reservada { background: #FEF3C7; color: #92400E; }
.vet-cita-pill.confirmada { background: #D1FAE5; color: #065F46; }
.vet-cita-pill.cancelada, .vet-cita-pill.no_asistio { background: #FEE2E2; color: #991B1B; }
.vet-cita-pill.completada { background: #E2E8F0; color: #334155; }
.vet-cita-pill.seleccionada { outline: 2px solid var(--vet-navy); outline-offset: -1px; }
.cal-tabla th.hoy { color: var(--vet-navy); }

.vet-tabs { display: flex; gap: 8px; margin-bottom: 14px; }

.vet-tab {
    flex: 1;
    text-align: center;
    background: #fff;
    color: var(--vet-text-muted);
    border: 1px solid var(--vet-border);
    border-radius: 14px;
    padding: 10px;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
}

.vet-tab.active { background: var(--vet-navy); color: #fff; border-color: var(--vet-navy); }

.vet-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .vet-field-row { grid-template-columns: 1fr; } }

.vet-file-input { font-size: 12.5px; }

.vet-profile-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.vet-profile-avatar {
    width: 72px; height: 72px; border-radius: 50%; background: var(--vet-field-bg);
    display: flex; align-items: center; justify-content: center; font-size: 30px; overflow: hidden; position: relative;
}
.vet-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Agenda: grupos por fecha + tarjeta de cita ──────────────── */
.vet-day-group { font-weight: 700; font-size: 13.5px; color: #1E293B; margin: 18px 0 8px; }
.vet-day-group:first-child { margin-top: 0; }

.vet-cita-card {
    background: #fff;
    border: 1px solid var(--vet-border);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.vet-cita-hora {
    width: 56px;
    min-width: 56px;
    background: var(--vet-field-bg);
    border-radius: 12px;
    padding: 10px 0;
    text-align: center;
}

.vet-cita-hora .h { font-size: 18px; font-weight: 700; color: var(--vet-navy); display: block; }
.vet-cita-hora .m { font-size: 11px; color: var(--vet-text-muted); }

.vet-cita-body { flex: 1; min-width: 180px; }
.vet-cita-motivo { font-weight: 700; font-size: 14.5px; margin: 0; }
.vet-cita-meta { font-size: 11.5px; color: var(--vet-text-muted); margin: 3px 0 6px; }

.vet-badge { display: inline-block; border-radius: 10px; padding: 3px 9px; font-size: 10.5px; font-weight: 700; }
.vet-badge-confirmada { background: #D1FAE5; color: #065F46; }
.vet-badge-reservada { background: #FEF3C7; color: #92400E; }
.vet-badge-cancelada, .vet-badge-no_asistio { background: #FEE2E2; color: #991B1B; }
.vet-badge-completada { background: #E2E8F0; color: #334155; }

.vet-cita-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }

.vet-btn-small {
    background: var(--vet-navy);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 9px 14px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.vet-btn-small:hover { filter: brightness(1.08); }
.vet-btn-small-outline {
    background: #fff;
    color: var(--vet-navy);
    border: 1px solid var(--vet-border);
    border-radius: 10px;
    padding: 7px 12px;
    font-weight: 700;
    font-size: 11.5px;
    cursor: pointer;
    white-space: nowrap;
}
.vet-btn-small-outline.activo { background: var(--vet-navy); color: #fff; border-color: var(--vet-navy); }

.vet-btn-link-danger {
    background: none;
    border: none;
    color: #E4572E;
    font-size: 11px;
    cursor: pointer;
    padding: 4px 0;
    white-space: nowrap;
}

/* ── Propias del Portal (PRO) ─────────────────────────────────── */
.vet-portal-tag {
    background: var(--vet-teal); color: #fff; font-size: 10px; font-weight: 800;
    letter-spacing: .04em; padding: 2px 7px; border-radius: 8px;
}

.vet-section-title { font-weight: 700; font-size: 13.5px; margin: 0 0 12px; }

/* ── Secciones abatibles (acordeón) — Perfil y similares ─────────── */
.vet-section-toggle {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; user-select: none; margin: 0 0 12px;
}
.vet-section-toggle .vet-section-title { margin: 0; }
.vet-section-chevron {
    font-size: 12px; color: var(--vet-text-muted); transition: transform .2s ease;
    flex-shrink: 0; margin-left: 12px;
}
.vet-section-chevron.abierto { transform: rotate(180deg); }

.vet-checkbox-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vet-checkbox-chip {
    display: inline-flex; align-items: center; gap: 6px; background: var(--vet-field-bg);
    border: 1px solid var(--vet-border); border-radius: 14px; padding: 8px 14px; font-size: 13px;
    cursor: pointer; user-select: none;
}
.vet-checkbox-chip input { margin: 0; }

/* Consentimiento legal en registro (T&C, Ley 19.628, newsletter): párrafos de texto que pueden
   envolver a dos líneas, no calzan con el look de "chip"/pill de .vet-checkbox-chip. */
.vet-legal-consent { margin-top: 6px; }
.vet-legal-consent label {
    display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.4;
    color: var(--vet-text-muted); cursor: pointer; padding: 6px 0;
}
.vet-legal-consent input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.vet-legal-consent a { color: var(--vet-navy); text-decoration: underline; }

.vet-mini-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.vet-mini-table th { text-align: left; font-size: 11px; color: var(--vet-text-muted); padding: 4px 6px; font-weight: 700; border-bottom: 1.5px solid var(--vet-border); }
.vet-mini-table td { padding: 6px 6px; border-bottom: 1px solid var(--vet-border); font-size: 12.5px; }
.vet-mini-table tbody tr:last-child td { border-bottom: none; }
.vet-mini-table select, .vet-mini-table input { padding: 8px 10px; font-size: 13px; }

.vet-add-row-btn {
    background: var(--vet-field-bg); color: var(--vet-navy); border: 1.5px dashed var(--vet-navy);
    border-radius: 12px; padding: 9px 14px; font-weight: 700; font-size: 12.5px; cursor: pointer;
}

/* Formulario "agregar" inline dentro de una sección de la bitácora clínica (Paciente.razor) */
.vet-add-form {
    border: 1.5px solid var(--vet-border); border-radius: 12px; background: var(--vet-field-bg);
    padding: 14px; margin: 12px 0 16px;
}
.vet-add-form .vet-field { margin-bottom: 12px; }
.vet-add-form .vet-field:last-of-type { margin-bottom: 10px; }

/* Métricas.razor: fila de filtros + tarjetas KPI + barras de distribución por estado */
.vet-filtros-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.vet-filtros-row .vet-field { margin-bottom: 0; min-width: 150px; }

.vet-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.vet-stat-card { background: #fff; border: 1px solid var(--vet-border); border-radius: 16px; padding: 18px; }
.vet-stat-card .valor { font-size: 24px; font-weight: 800; color: var(--vet-navy); margin: 0; }
.vet-stat-card .etiqueta { font-size: 12px; color: var(--vet-text-muted); margin: 4px 0 0; }

.vet-barra-estado { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vet-barra-estado .etiqueta { width: 110px; font-size: 12.5px; flex-shrink: 0; }
.vet-barra-estado .pista { flex: 1; background: var(--vet-field-bg); border-radius: 8px; height: 10px; overflow: hidden; }
.vet-barra-estado .relleno { display: block; height: 100%; border-radius: 8px; }
.vet-barra-estado .num { width: 100px; text-align: right; font-size: 12.5px; color: var(--vet-text-muted); flex-shrink: 0; }
.vet-remove-row-btn {
    background: none; border: none; color: var(--vet-danger); font-size: 16px; cursor: pointer; line-height: 1;
}

.vet-modalidad-card {
    border: 1.5px solid var(--vet-border); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px;
    transition: border-color .15s;
}
.vet-modalidad-card.activa { border-color: var(--vet-navy); background: #F8FBFD; }
.vet-modalidad-card-header { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; margin-bottom: 4px; cursor: pointer; }
.vet-modalidad-card-body { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vet-border); }

/* ── Calendario de disponibilidad (por modalidad) ────────────── */
.cal-localidad { margin-bottom: 26px; }
.cal-localidad-titulo {
    font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--vet-navy); margin: 0 0 10px;
}
.cal-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 8px; table-layout: fixed; }
.cal-tabla th {
    background: var(--vet-field-bg); border: 1px solid var(--vet-border);
    padding: 5px 3px; text-align: center; font-weight: 700; font-size: 11px; color: var(--vet-text-muted);
}
.cal-tabla th.col-hora { width: 52px; }
.cal-tabla td {
    border: 1px solid var(--vet-border); height: 24px; cursor: pointer; text-align: center;
}
.cal-tabla td.hora-label {
    font-size: 10.5px; color: var(--vet-text-muted); text-align: right; padding-right: 6px;
    cursor: default; background: var(--vet-field-bg); white-space: nowrap; width: 52px;
}
.cal-tabla td.slot-libre { background: #fff; }
.cal-tabla td.slot-libre:hover { background: var(--vet-field-bg); }
.cal-tabla td.slot-ocupado { background: var(--vet-navy); }
.cal-tabla td.slot-ocupado:hover { background: var(--vet-cyan); }
.cal-tabla td.slot-bloqueado {
    background: repeating-linear-gradient(45deg, #F3F4F6, #F3F4F6 3px, #E2E5E9 3px, #E2E5E9 5px);
    cursor: not-allowed;
}
.cal-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--vet-text-muted); align-items: center; }
.cal-leyenda-item { display: flex; align-items: center; gap: 5px; }
.cal-leyenda-color { width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--vet-border); }

/* ── Agenda: vista mes (tipo Outlook/Google Calendar) ────────────── */
.cal-mes { width: 100%; border-collapse: collapse; table-layout: fixed; margin-bottom: 8px; }
.cal-mes th {
    padding: 8px 4px; font-size: 11px; font-weight: 700; color: var(--vet-text-muted);
    text-align: left; border-bottom: 1px solid var(--vet-border);
}
.cal-mes td {
    border: 1px solid var(--vet-border); vertical-align: top; height: 92px; max-height: 92px;
    padding: 5px; cursor: pointer; overflow: hidden;
}
.cal-mes td:hover { background: var(--vet-field-bg); }
.cal-mes td.fuera-de-mes { background: #FAFCFD; }
.cal-mes td.fuera-de-mes .dia-num { color: var(--vet-text-placeholder); }
.cal-mes td.es-hoy { background: #EAF6FB; }
.cal-mes .dia-num { font-size: 12px; font-weight: 700; margin: 0 0 4px; color: var(--vet-text); }
.cal-mes .dia-num.es-hoy-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; background: var(--vet-navy); color: #fff;
}
.cal-mes-cita {
    display: block; font-size: 10.5px; font-weight: 600; padding: 1.5px 5px; border-radius: 6px;
    margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-mes-mas { font-size: 10px; color: var(--vet-text-muted); font-weight: 600; }

/* ── Agenda: buscador con resultados tipo autocomplete ───────────── */
.vet-buscador { position: relative; max-width: 340px; margin-bottom: 14px; }
.vet-buscador input {
    width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--vet-border);
    background: var(--vet-field-bg); font-size: 13.5px; color: var(--vet-text);
}
.vet-buscador-resultados {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff;
    border: 1px solid var(--vet-border); border-radius: 12px; box-shadow: 0 8px 20px rgba(15, 95, 165, .12);
    z-index: 20; max-height: 280px; overflow-y: auto;
}
.vet-buscador-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--vet-border); }
.vet-buscador-item:last-child { border-bottom: none; }
.vet-buscador-item:hover { background: var(--vet-field-bg); }
.vet-buscador-item .n { font-weight: 700; font-size: 13px; }
.vet-buscador-item .s { color: var(--vet-text-muted); font-size: 11.5px; margin-top: 1px; }
.vet-buscador-vacio { padding: 14px; color: var(--vet-text-muted); font-size: 12.5px; }

/* ── Agenda: acciones secundarias de la tarjeta de cita (duplicar/copiar) ─ */
.vet-cita-acciones-sec { display: flex; gap: 6px; margin-top: 8px; }

/* ── Fichas: layout maestro-detalle con frame lateral (buscar paciente → temas) ─ */
.ficha-layout { display: flex; align-items: flex-start; gap: 20px; }

.ficha-sidebar {
    width: 280px; flex-shrink: 0; background: #fff; border: 1px solid var(--vet-border);
    border-radius: 20px; padding: 16px; position: sticky; top: 20px;
    max-height: calc(100vh - 40px); overflow-y: auto;
}

.ficha-sidebar input[type="text"] {
    width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--vet-border);
    background: var(--vet-field-bg); font-size: 13px; margin-bottom: 10px; color: var(--vet-text);
}

.ficha-paciente-item {
    display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px;
    cursor: pointer; margin-bottom: 2px;
}
.ficha-paciente-item:hover { background: var(--vet-field-bg); }
.ficha-paciente-item.activo { background: var(--vet-navy); }
.ficha-paciente-item.activo .n { color: #fff; }
.ficha-paciente-item.activo .s { color: rgba(255, 255, 255, .75); }
.ficha-paciente-item .avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--vet-field-bg);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
    flex-shrink: 0; overflow: hidden;
}
.ficha-paciente-item .avatar img { width: 100%; height: 100%; object-fit: cover; }
.ficha-paciente-item .n { font-weight: 700; font-size: 13px; line-height: 1.3; }
.ficha-paciente-item .s { font-size: 11.5px; color: var(--vet-text-muted); }
.ficha-sidebar-vacio { padding: 10px 4px; color: var(--vet-text-muted); font-size: 12.5px; }

.ficha-sidebar-volver {
    display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600;
    color: var(--vet-text-muted); margin-bottom: 12px; cursor: pointer;
}
.ficha-sidebar-volver:hover { color: var(--vet-navy); }

.ficha-sidebar-paciente {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 14px;
    border-bottom: 1px solid var(--vet-border);
}
.ficha-sidebar-paciente .n { font-weight: 700; font-size: 14px; }
.ficha-sidebar-paciente .s { font-size: 11.5px; color: var(--vet-text-muted); }

.ficha-tema {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px;
    cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--vet-text); margin-bottom: 2px;
}
.ficha-tema:hover { background: var(--vet-field-bg); }
.ficha-tema.activo { background: var(--vet-navy); color: #fff; }

.ficha-panel { flex: 1; min-width: 0; }

.ficha-nota {
    border: 1px solid var(--vet-border); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
}
.ficha-nota p { margin: 0; font-size: 13.5px; white-space: pre-wrap; }
.ficha-nota .meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ficha-nota .fecha { font-size: 11.5px; color: var(--vet-text-muted); font-weight: 600; }

@media (max-width: 860px) {
    .ficha-layout { flex-direction: column; }
    .ficha-sidebar { width: 100%; position: static; max-height: none; }
}

.vet-urgencias-box { margin-top: 18px; padding-top: 16px; border-top: 1.5px solid var(--vet-border); }
.vet-urgencias-comunas { font-size: 12.5px; color: var(--vet-teal); margin: 6px 0 0; }
.vet-urgencias-disabled-hint { font-size: 12.5px; color: var(--vet-text-muted); margin: 6px 0 0; }

/* Tarjetas de beneficios del landing / intro de registro (Login.razor, Registro.razor).
   Se habían usado en el markup sin definirlas acá — por eso se veían como bloques de
   color a todo el ancho en vez de tarjetas con ícono + texto. */
.vet-registro-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--vet-border);
    background: #fff;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(15, 95, 165, 0.04);
}
.vet-registro-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}
.vet-registro-body { flex: 1 1 auto; min-width: 0; }
.vet-registro-titulo { margin: 0 0 3px; font-weight: 700; font-size: 14.5px; color: var(--vet-navy); }
.vet-registro-subtitulo { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--vet-text-muted); }

/* Landing (Login.razor): un poco más de aire y una cabecera con look de "portada" en vez
   de una tarjeta blanca plana pegada al login. */
.vet-hero-card {
    text-align: center;
    padding: 28px 24px 24px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--vet-navy) 0%, var(--vet-cyan) 100%);
    color: #fff;
    margin-bottom: 16px;
    box-shadow: 0 6px 18px rgba(15, 95, 165, 0.18);
}
.vet-hero-card h1 { color: #fff; margin: 0 0 8px; font-size: 24px; letter-spacing: -0.01em; }
.vet-hero-card p { color: rgba(255, 255, 255, 0.88); margin: 0; font-size: 14px; line-height: 1.5; }

/* Medidor de fortaleza de contraseña (Registro.razor / RegistroCuenta.razor), estilo similar
   al de cogniadata.cl: barra de progreso + etiqueta, ambas coloreadas según el nivel. */
.vet-pwd-meter { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.vet-pwd-meter-track {
    flex: 1 1 auto; height: 6px; border-radius: 4px; background: var(--vet-field-bg);
    border: 1px solid var(--vet-border); overflow: hidden;
}
.vet-pwd-meter-fill { height: 100%; border-radius: 4px; transition: width .15s ease, background-color .15s ease; }
.vet-pwd-meter-fill.debil { background: var(--vet-danger); }
.vet-pwd-meter-fill.media { background: var(--vet-warning); }
.vet-pwd-meter-fill.fuerte { background: var(--vet-teal); }
.vet-pwd-meter-label { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; width: 42px; }
.vet-pwd-meter-label.debil { color: var(--vet-danger); }
.vet-pwd-meter-label.media { color: var(--vet-warning); }
.vet-pwd-meter-label.fuerte { color: var(--vet-teal); }

/* ── Tiendas (maqueta, mismo lenguaje visual que Mis Tiendas en la app de dueños) ─ */
.vet-mockup-banner {
    background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 16px;
    padding: 14px 18px; margin-bottom: 20px;
}
.vet-mockup-banner .t { font-weight: 700; color: #92400E; margin: 0 0 2px; font-size: 14px; }
.vet-mockup-banner .s { font-size: 12.5px; color: #92400E; margin: 0; }

.vet-tiendas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }

.vet-tienda-card {
    background: #fff; border: 1px solid var(--vet-border); border-radius: 16px;
    padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
}
.vet-tienda-logo {
    width: 44px; height: 44px; border-radius: 12px; background: var(--vet-field-bg);
    display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.vet-tienda-nombre { font-weight: 700; font-size: 14px; margin: 0; }
.vet-tienda-categoria { color: var(--vet-text-muted); font-size: 12px; margin: 2px 0 0; }

/* ── Mis Fichas: fila de mascotas de un mismo dueño/a en el sidebar ──────── */
.ficha-owner-group { margin-bottom: 4px; }
.ficha-owner-header {
    font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--vet-text-muted); padding: 10px 8px 4px;
}
.ficha-compra-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    border-bottom: 1px solid var(--vet-border); padding: 10px 0;
}
.ficha-compra-row:last-child { border-bottom: none; }
.ficha-compra-row .info p { margin: 0; }
.ficha-compra-row .info .motivo { font-weight: 700; font-size: 13.5px; }
.ficha-compra-row .info .meta { font-size: 11.5px; color: var(--vet-text-muted); margin-top: 2px; }
.ficha-compra-row .precio { font-weight: 700; font-size: 14px; white-space: nowrap; }