/* ==========================================================================
   Tema Clínica Veterinaria Entre Ríos
   Identidad del logo: anillo azul marino, alas celestes, fondo blanco.
   ========================================================================== */

:root {
    --er-navy: #15284B;
    --er-navy-900: #0E1C36;
    --er-navy-700: #1E3A66;
    --er-azure: #2B7CD3;
    --er-azure-300: #7DB3EC;
    --er-azure-50: #EAF3FC;
    --er-bg: #F3F6FB;
    --er-radius: 14px;
}

/* ---------- Base ---------- */
.fi-body {
    background: var(--er-bg) !important;
}

/* ---------- Marca (logo + nombre) ---------- */
.fi-logo { height: auto !important; }
.er-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
}
.er-brand__logo {
    height: 2.75rem;
    width: 2.75rem;
    border-radius: 9999px;
    background: #fff;
    object-fit: contain;
    padding: 2px;
    box-shadow: 0 0 0 2px var(--er-azure-300);
}
.er-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}
.er-brand__name {
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .95rem;
    color: var(--er-navy);
}
.er-brand__tag {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--er-azure);
}

/* ---------- Barra lateral (azul marino, como el anillo del logo) ---------- */
.fi-sidebar,
.fi-sidebar-header {
    background: linear-gradient(180deg, var(--er-navy) 0%, var(--er-navy-900) 100%) !important;
    box-shadow: none !important;
    border: 0 !important;
}
.fi-sidebar-header {
    border-bottom: 1px solid rgba(125, 179, 236, .18) !important;
}
.fi-sidebar .er-brand__name { color: #fff; }
.fi-sidebar .er-brand__tag { color: var(--er-azure-300); }

.fi-sidebar-group-label {
    color: var(--er-azure-300) !important;
    font-size: .68rem !important;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.fi-sidebar-group-button .fi-icon-btn,
.fi-sidebar-group-collapse-button { color: var(--er-azure-300) !important; }

.fi-sidebar-item-button {
    border-radius: 10px !important;
    transition: background .15s ease;
}
.fi-sidebar-item-label { color: rgba(255, 255, 255, .82) !important; font-weight: 500; }
.fi-sidebar-item-icon { color: var(--er-azure-300) !important; }

.fi-sidebar-item-button:hover {
    background: rgba(43, 124, 211, .18) !important;
}
.fi-sidebar-item-button:hover .fi-sidebar-item-label { color: #fff !important; }

.fi-sidebar-item-active .fi-sidebar-item-button {
    background: var(--er-azure) !important;
    box-shadow: 0 6px 16px -6px rgba(43, 124, 211, .7);
}
.fi-sidebar-item-active .fi-sidebar-item-label,
.fi-sidebar-item-active .fi-sidebar-item-icon { color: #fff !important; }

.fi-sidebar-item-grouped-border div { background: rgba(125, 179, 236, .35) !important; }
.fi-sidebar-item-active .fi-sidebar-item-grouped-border div { background: #fff !important; }

.fi-sidebar-nav { scrollbar-color: rgba(125,179,236,.35) transparent; }

/* ---------- Barra superior ---------- */
.fi-topbar > nav {
    background: #fff !important;
    box-shadow: none !important;
    border-bottom: 3px solid var(--er-azure) !important;
}

/* ---------- Encabezados ---------- */
.fi-header-heading {
    color: var(--er-navy) !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
}
.fi-header-subheading { color: #5b6b86 !important; }

/* ---------- Tarjetas / secciones / tablas ---------- */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-repeater-item {
    border-radius: var(--er-radius) !important;
    box-shadow: 0 1px 2px rgba(21, 40, 75, .06), 0 8px 24px -12px rgba(21, 40, 75, .18) !important;
    --tw-ring-color: rgba(21, 40, 75, .06) !important;
}
.fi-section-header-heading,
.fi-ta-header-heading {
    color: var(--er-navy) !important;
    font-weight: 700 !important;
}
.fi-section-header {
    border-bottom: 1px solid var(--er-azure-50);
}
.fi-ta-header-cell-label { color: var(--er-navy) !important; font-weight: 700 !important; }
.fi-ta-row:hover { background: var(--er-azure-50) !important; }

/* Tarjetas de estadísticas con acento celeste (las "alas") */
.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--er-azure);
}
.fi-wi-stats-overview-stat::after {
    content: "";
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 110px;
    height: 110px;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(43,124,211,.14) 0%, rgba(43,124,211,0) 70%);
}
.fi-wi-stats-overview-stat-value { color: var(--er-navy) !important; font-weight: 800 !important; }
.fi-wi-stats-overview-stat-label { color: #5b6b86 !important; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem !important; }

/* ---------- Botones ---------- */
.fi-btn { border-radius: 10px !important; font-weight: 600 !important; }

/* ---------- Pestañas ---------- */
.fi-tabs-item-active { color: var(--er-azure) !important; }

/* ==========================================================================
   Login (layout simple): fondo azul marino con "alas" celestes
   ========================================================================== */
.fi-simple-layout {
    background:
        radial-gradient(ellipse 60% 45% at 12% 18%, rgba(43, 124, 211, .55) 0%, rgba(43, 124, 211, 0) 70%),
        radial-gradient(ellipse 60% 45% at 88% 18%, rgba(43, 124, 211, .55) 0%, rgba(43, 124, 211, 0) 70%),
        radial-gradient(ellipse 80% 60% at 50% 110%, rgba(125, 179, 236, .35) 0%, rgba(125, 179, 236, 0) 70%),
        linear-gradient(160deg, var(--er-navy) 0%, var(--er-navy-900) 100%) !important;
}
.fi-simple-main {
    border-radius: 22px !important;
    box-shadow: 0 30px 60px -20px rgba(8, 18, 38, .55) !important;
    border-top: 5px solid var(--er-azure);
}
.fi-simple-header .er-brand {
    flex-direction: column;
    gap: .9rem;
    text-align: center;
}
.fi-simple-header .er-brand__logo {
    height: 7.5rem;
    width: 7.5rem;
    padding: 4px;
    box-shadow: 0 0 0 4px var(--er-azure-50), 0 0 0 6px var(--er-azure-300);
}
.fi-simple-header .er-brand__text { align-items: center; }
.fi-simple-header .er-brand__name { font-size: 1.35rem; }
.fi-simple-header .er-brand__tag { font-size: .72rem; }
.fi-simple-header-heading { color: var(--er-navy) !important; font-weight: 700 !important; }

.er-login-foot {
    margin-top: 1.25rem;
    text-align: center;
    font-size: .75rem;
    color: #7a879d;
}

/* ==========================================================================
   Reportes
   ========================================================================== */
.er-rep-filtros { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; background:#fff; padding:14px 16px; border-radius:var(--er-radius); box-shadow:0 1px 2px rgba(21,40,75,.06); }
.er-rep-campo label { display:block; font-size:.72rem; font-weight:700; color:var(--er-navy); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.er-rep-campo input { border:1px solid #cbd5e1; border-radius:10px; padding:6px 10px; font-size:.9rem; }
.er-rep-atajos { display:flex; flex-wrap:wrap; gap:6px; }
.er-rep-kpis { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; }
.er-rep-kpi { background:#fff; border-radius:var(--er-radius); padding:16px; border-top:4px solid var(--er-azure); box-shadow:0 1px 2px rgba(21,40,75,.06), 0 8px 24px -12px rgba(21,40,75,.18); }
.er-rep-kpi-t { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#5b6b86; }
.er-rep-kpi-v { font-size:1.5rem; font-weight:800; color:var(--er-navy); margin:4px 0 2px; }
.er-rep-kpi-s { font-size:.75rem; color:#7a879d; }
.er-rep-chart { display:flex; align-items:flex-end; gap:3px; height:200px; padding-top:8px; }
.er-rep-bar-wrap { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; min-width:4px; }
.er-rep-bar { width:100%; max-width:34px; background:linear-gradient(180deg, var(--er-azure) 0%, var(--er-navy) 100%); border-radius:6px 6px 2px 2px; transition:opacity .15s; }
.er-rep-bar-wrap:hover .er-rep-bar { opacity:.75; }
.er-rep-bar-l { font-size:.62rem; color:#7a879d; margin-top:4px; }
.er-rep-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:16px; }
.er-rep-t { width:100%; font-size:.875rem; border-collapse:collapse; }
.er-rep-t th { text-align:left; color:var(--er-navy); font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; padding:8px 6px; border-bottom:2px solid var(--er-azure-50); }
.er-rep-t td { padding:8px 6px; border-bottom:1px solid #eef2f7; }
.er-rep-t .r { text-align:right; }
.er-rep-t .vacio { text-align:center; color:#94a3b8; padding:18px; }
.er-rep-t .deuda { color:#b91c1c; font-weight:600; }
.er-rep-pct { background:var(--er-azure-50); border-radius:99px; height:8px; overflow:hidden; }
.er-rep-pct span { display:block; height:100%; background:var(--er-azure); }
.er-rep-tag { font-size:.7rem; font-weight:700; padding:2px 8px; border-radius:99px; }
.er-rep-tag.p { background:#e0f2fe; color:#075985; }
.er-rep-tag.s { background:#ede9fe; color:#5b21b6; }

/* Tablas más compactas en notebooks: evita que la última columna (acciones) quede fuera de pantalla. */
@media (max-width: 1535px) {
    .fi-ta-header-cell { padding-inline: .5rem !important; }
    .fi-ta-cell .px-3 { padding-inline: .5rem !important; }
}

/* ==========================================================================
   Punto de venta (POS)
   ========================================================================== */
.er-pos { display:grid; grid-template-columns: minmax(0, 1fr) 440px; gap:16px; align-items:start; }
@media (max-width: 1024px) { .er-pos { grid-template-columns: 1fr; } }

/* ---- Consultas por cobrar ---- */
.er-pos-pend { background:#fff; border:1px solid #e6ebf3; border-left:4px solid #0E7490; border-radius:12px; padding:10px 12px; margin-bottom:12px; }
.er-pos-pend-tit { display:flex; align-items:center; gap:6px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#0E7490; margin-bottom:8px; }
.er-pos-pend-lista { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.er-pos-pend-item { flex:0 0 auto; display:flex; flex-direction:column; gap:1px; text-align:left; cursor:pointer; background:#f0fbfe; border:1px solid #bae6fd; border-radius:10px; padding:7px 11px; }
.er-pos-pend-item:hover { border-color:#0E7490; }
.er-pos-pend-item.activo { background:#0E7490; border-color:#0E7490; }
.er-pos-pend-item.activo .er-pos-pend-pac, .er-pos-pend-item.activo .er-pos-pend-meta { color:#fff; }
.er-pos-pend-pac { font-weight:700; color:var(--er-navy); font-size:.85rem; }
.er-pos-pend-meta { font-size:.68rem; color:#64748b; }

/* ---- Catálogo ---- */
.er-pos-buscar { position:sticky; top:0; z-index:5; background:var(--er-bg); padding-bottom:10px; }
.er-pos-buscar input[type="search"] {
    width:100%; padding:11px 14px; border:1px solid #d7deea; border-radius:12px;
    font-size:.95rem; background:#fff; color:var(--er-navy);
}
.er-pos-buscar input[type="search"]:focus { outline:none; box-shadow:0 0 0 3px var(--er-azure-300); border-color:var(--er-azure); }
.er-pos-cats { display:flex; gap:6px; margin-top:10px; }
.er-pos-cat { font-size:.78rem; font-weight:600; padding:5px 12px; border-radius:99px; border:1px solid #d7deea; background:#fff; color:#5b6b86; cursor:pointer; }
.er-pos-cat.activo { background:var(--er-navy); border-color:var(--er-navy); color:#fff; }

/* ---- Catálogo como lista filtrable ---- */
.er-pos-lista { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
.er-pos-fila {
    display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
    background:#fff; border:1px solid #e9eef5; border-radius:10px; padding:9px 12px;
    transition:background .1s, border-color .1s;
}
.er-pos-fila:hover:not(:disabled) { background:var(--er-azure-50); border-color:var(--er-azure-300); }
.er-pos-fila.agotado { opacity:.5; cursor:not-allowed; }
.er-pos-fila-tag { flex:0 0 auto; width:20px; height:20px; display:grid; place-items:center; border-radius:6px; font-size:.68rem; font-weight:800; color:#fff; background:var(--er-azure); }
.er-pos-fila-tag.servicio { background:#7c3aed; }
.er-pos-fila-nombre { flex:1; min-width:0; font-weight:600; color:var(--er-navy); font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.er-pos-fila-stock { flex:0 0 auto; font-size:.68rem; color:#7a879d; }
.er-pos-fila-stock.cero { color:#b91c1c; }
.er-pos-fila-precio { flex:0 0 auto; font-weight:800; color:var(--er-navy); font-size:.9rem; }
.er-pos-fila-add { flex:0 0 auto; width:24px; height:24px; display:grid; place-items:center; border-radius:7px; background:var(--er-azure-50); color:var(--er-azure); font-weight:800; font-size:1.05rem; }
.er-pos-fila:hover:not(:disabled) .er-pos-fila-add { background:var(--er-azure); color:#fff; }
.er-pos-vacio, .er-pos-carrito-vacio { color:#94a3b8; text-align:center; padding:28px; }
.er-pos-carrito-vacio { display:flex; flex-direction:column; align-items:center; gap:8px; }

/* ---- Carrito ---- */
.er-pos-carrito {
    position:sticky; top:12px; background:#fff; border-radius:var(--er-radius);
    border:1px solid #dbe3ef; border-top:4px solid var(--er-azure);
    box-shadow:0 12px 34px -16px rgba(21,40,75,.4);
    padding:18px; display:flex; flex-direction:column; gap:13px;
}
.er-pos-carrito-head { display:flex; justify-content:space-between; align-items:center; }
.er-pos-carrito-head h2 { font-size:1.2rem; font-weight:800; color:var(--er-navy); letter-spacing:-.01em; }
.er-pos-atencion { display:flex; align-items:center; gap:8px; background:#ecfeff; border:1px solid #a5f3fc; color:#155e75; border-radius:9px; padding:7px 10px; font-size:.82rem; }
.er-pos-atencion strong { font-weight:800; }
.er-pos-atencion button { margin-left:auto; color:#0e7490; font-size:1.1rem; line-height:1; background:none; border:none; cursor:pointer; }
.er-pos-lineas { display:flex; flex-direction:column; gap:8px; max-height:44vh; overflow-y:auto; }
.er-pos-linea { border:1px solid #eef2f7; border-radius:10px; padding:8px 10px; }
.er-pos-linea-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.er-pos-linea-nombre { font-weight:700; color:var(--er-navy); font-size:.88rem; }
.er-pos-libre-desc { flex:1; border:1px solid #d7deea; border-radius:8px; padding:4px 8px; font-size:.85rem; }
.er-pos-x { color:#b91c1c; font-size:1.2rem; line-height:1; background:none; border:none; cursor:pointer; padding:0 4px; }
.er-pos-linea-ctrl { display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap; }
.er-pos-qty { display:flex; align-items:center; gap:6px; }
.er-pos-qty button { width:26px; height:26px; border-radius:7px; border:1px solid #d7deea; background:#f6f8fc; color:var(--er-navy); font-weight:700; cursor:pointer; }
.er-pos-qty span { min-width:20px; text-align:center; font-weight:700; }
.er-pos-unit { font-size:.78rem; color:#7a879d; }
.er-pos-campo { display:flex; flex-direction:column; font-size:.62rem; color:#8796ad; text-transform:uppercase; font-weight:700; }
.er-pos-campo input { width:72px; border:1px solid #d7deea; border-radius:7px; padding:3px 6px; font-size:.82rem; }
.er-pos-linea-sub { margin-left:auto; font-weight:800; color:var(--er-navy); }

.er-pos-total { display:flex; justify-content:space-between; align-items:center; border-top:2px dashed #e6ebf3; padding-top:10px; }
.er-pos-total span { font-size:.85rem; color:#5b6b86; font-weight:600; }
.er-pos-total strong { font-size:1.5rem; font-weight:800; color:var(--er-navy); }

.er-pos-bloque { display:flex; flex-direction:column; gap:5px; }
.er-pos-bloque > span { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#5b6b86; }
.er-pos-bloque > span em { font-style:normal; font-weight:500; text-transform:none; color:#94a3b8; }
.er-pos-req { color:#b91c1c !important; }
.er-pos-bloque select, .er-pos-efectivo input { border:1px solid #d7deea; border-radius:10px; padding:8px 10px; font-size:.9rem; background:#fff; color:var(--er-navy); }
.er-pos-medios { display:flex; flex-wrap:wrap; gap:6px; }
.er-pos-medio { font-size:.78rem; font-weight:600; padding:6px 10px; border-radius:9px; border:1px solid #d7deea; background:#fff; color:#5b6b86; cursor:pointer; }
.er-pos-medio.activo { background:var(--er-azure); border-color:var(--er-azure); color:#fff; }
.er-pos-efectivo { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; }
.er-pos-vuelto { text-align:right; }
.er-pos-vuelto span { display:block; font-size:.72rem; color:#5b6b86; font-weight:700; text-transform:uppercase; }
.er-pos-vuelto strong { font-size:1.25rem; font-weight:800; color:#15803d; }
.er-pos-nota { font-size:.78rem; color:#92400e; background:#fef3c7; border-radius:8px; padding:8px 10px; }
.er-pos-cobrar { width:100%; justify-content:center; }
.er-pos-cobrar .fi-btn { width:100%; }

/* ---- Modo oscuro ---- */
.dark .er-pos-buscar { background:transparent; }
.dark .er-pos-buscar input[type="search"],
.dark .er-pos-fila, .dark .er-pos-carrito, .dark .er-pos-bloque select, .dark .er-pos-pend,
.dark .er-pos-efectivo input, .dark .er-pos-cat, .dark .er-pos-medio, .dark .er-pos-libre-desc, .dark .er-pos-campo input {
    background:#1f2937; border-color:#374151; color:#e5e7eb;
}
.dark .er-pos-fila-nombre, .dark .er-pos-fila-precio, .dark .er-pos-carrito-head h2, .dark .er-pos-total strong, .dark .er-pos-linea-nombre, .dark .er-pos-linea-sub, .dark .er-pos-pend-pac { color:#f3f4f6; }
.dark .er-pos-fila:hover:not(:disabled) { background:#273449; border-color:var(--er-azure); }
.dark .er-pos-fila-add { background:#374151; }
.dark .er-pos-cat.activo { background:var(--er-azure); border-color:var(--er-azure); color:#fff; }
.dark .er-pos-linea { border-color:#374151; }
.dark .er-pos-qty button { background:#374151; border-color:#4b5563; color:#e5e7eb; }
.dark .er-pos-pend-item { background:#0b3a46; border-color:#155e75; }
.dark .er-pos-atencion { background:#0b3a46; border-color:#155e75; color:#a5f3fc; }