/* odontOS · rediseño móvil 2026-10-19 (maquetas aprobadas por Daniel).
   Solo aplica en pantallas ≤768px: el escritorio no cambia. Se carga al final del <body>. */
@media (max-width: 768px) {
  html body {
    --m-bg: #F2F4F8; --m-card: #fff; --m-ink: #0F172A; --m-ink2: #475569; --m-mut: #64748B; --m-line: #E4E8EF; --m-fill: #EEF1F6;
    --m-acc: #0284C7; --m-accT: #0369A1; --m-accS: #E0F2FE; --m-accD: #075985;
    --m-ok: #047857; --m-okS: #D1FAE5; --m-warn: #B45309; --m-warnS: #FEF3C7; --m-bad: #B91C1C; --m-badS: #FEE2E2;
    --m-sh: 0 1px 2px rgba(15,23,42,.05), 0 4px 14px rgba(15,23,42,.05);
    background: var(--m-bg) !important;
    font-family: "Figtree", system-ui, sans-serif;
  }
  :root[data-theme="dark"] html body, :root[data-theme="dark"] body {
    --m-bg: #0B1220; --m-card: #131C2E; --m-ink: #ECECEC; --m-ink2: #CBD5E1; --m-mut: #94A3B8; --m-line: #243046; --m-fill: #1B2740;
    --m-accT: #38BDF8; --m-accS: #0C2A3F; --m-accD: #7DD3FC; --m-okS: #0F3D2E; --m-warnS: #3F2E0B; --m-badS: #451A1A; --m-ok: #34D399; --m-warn: #FBBF24; --m-bad: #F87171;
  }

  /* ---------- Contenedor y títulos grandes ---------- */
  html body main { padding: 8px 16px 110px !important; }
  html body .panel > .panel-title, html body .panel .panel-title-row .panel-title,
  html body .patients-panel-title { font-size: 32px !important; font-weight: 800 !important; letter-spacing: -.02em !important; line-height: 1.1 !important; margin: 4px 0 6px !important; color: var(--m-ink) !important; }

  /* ---------- Tarjetas y bloques ---------- */
  html body .ini-card, html body .card, html body .panel .table-wrap, html body .mini-card {
    border-radius: 16px !important; border: 0 !important; box-shadow: var(--m-sh) !important; background: var(--m-card) !important;
  }
  html body .ini-card { padding: 16px !important; }
  html body .ini-card > h2 { font-size: 20px !important; font-weight: 800 !important; letter-spacing: -.01em; margin: 0 0 10px !important; }

  /* ---------- Botones ---------- */
  html body button.cta, html body .cta { min-height: 48px; border-radius: 14px !important; font-weight: 800 !important; font-size: 16px !important; }
  html body button.secondary { min-height: 44px; border-radius: 12px !important; font-weight: 700 !important; }
  html body button.icon-btn { min-width: 44px; min-height: 44px; border-radius: 22px !important; }

  /* ---------- Barra inferior (5 espacios, + elevado) ---------- */
  html body .mobile-bottom-nav { height: 84px !important; padding: 8px 6px calc(env(safe-area-inset-bottom, 0px) + 6px) !important; align-items: flex-start !important; }
  html body .mobile-bottom-nav .mbn-item { min-height: 52px !important; font-size: 11.5px !important; font-weight: 700 !important; gap: 3px !important; color: var(--m-mut) !important; }
  html body .mobile-bottom-nav .mbn-item.active { color: var(--m-accT) !important; }
  html body .mobile-bottom-nav .mbn-item svg { width: 24px !important; height: 24px !important; }
  html body .mobile-bottom-nav .mbn-cta { margin-top: -20px; color: var(--m-accT) !important; }
  html body .mobile-bottom-nav .mbn-cta-icon { width: 54px !important; height: 54px !important; border-radius: 27px !important; border: 4px solid var(--m-card) !important; box-shadow: 0 6px 16px rgba(2,132,199,.4) !important; background: var(--m-acc) !important; display: grid !important; place-items: center !important; }
  html body .mobile-bottom-nav .mbn-cta-icon svg { width: 26px !important; height: 26px !important; color: #fff !important; }

  /* ---------- Chips de filtro ---------- */
  html body .pat-chips, html body .exp-chips { gap: 8px !important; }
  html body .view-segmented-control { background: #E3E8F0 !important; border-radius: 11px !important; padding: 3px !important; display: flex !important; }
  html body .view-segmented-control .view-segment-btn { flex: 1; min-height: 34px !important; border-radius: 9px !important; font-weight: 700 !important; font-size: 14px !important; border: 0 !important; background: transparent !important; color: var(--m-ink2) !important; }
  html body .view-segmented-control .view-segment-btn.active { background: #fff !important; color: var(--m-ink) !important; box-shadow: 0 1px 3px rgba(15,23,42,.18) !important; }

  /* ================= INICIO ================= */
  html body #inicio .ini-top { display: block !important; margin: 0 !important; }
  html body #inicio .ini-sub { font-size: 14px !important; color: var(--m-mut) !important; font-weight: 500; margin: 0 0 2px !important; order: -1; }
  html body #inicio .ini-greet { display: flex; flex-direction: column-reverse; }
  html body #inicio .ini-greet h2 { font-size: 30px !important; }
  /* acciones rápidas: fila de 4 mosaicos */
  html body #inicio .ini-qa { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; margin: 14px 0 6px !important; overflow: visible !important; }
  html body #inicio .ini-qa > #iniAccExtra { display: contents !important; }
  html body #inicio .ini-qa .ini-qa-btn { flex-direction: column !important; height: auto !important; min-height: 84px !important; padding: 8px 2px !important; gap: 6px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 12.5px !important; font-weight: 700 !important; color: var(--m-ink2) !important; text-align: center; white-space: normal !important; line-height: 1.15; }
  html body #inicio .ini-qa .ini-qa-btn .ic { width: 56px !important; height: 56px !important; border-radius: 16px !important; display: grid !important; place-items: center !important; background: var(--m-accS) !important; color: var(--m-accT) !important; margin: 0 auto; }
  html body #inicio .ini-qa .ini-qa-btn .ic svg { width: 26px !important; height: 26px !important; }
  html body #inicio .ini-qa .ini-qa-btn.main .ic { background: var(--m-acc) !important; color: #fff !important; }
  html body #inicio .ini-qa .ini-qa-btn:nth-of-type(n+5), html body #inicio .ini-qa #iniAccCfg, html body #inicio .ini-qa #iniAccExtra .ini-qa-btn:nth-child(n+4) { display: none !important; }
  /* KPI 2×2 */
  html body #inicio .summary { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin: 10px 0 !important; }
  html body #inicio .summary .mini-card { padding: 14px !important; min-height: 0 !important; display: block !important; }
  html body #inicio .summary .mini-card .mi-ic { display: none !important; }
  html body #inicio .summary .mini-card span { display: block; font-size: 13px !important; font-weight: 700 !important; color: var(--m-mut) !important; text-transform: none !important; letter-spacing: 0 !important; white-space: normal !important; }
  html body #inicio .summary .mini-card strong { display: block; font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.02em; margin-top: 2px; }
  html body #inicio .grid-2 { display: block !important; }
  html body #inicio .grid-2 > .ini-card { margin-bottom: 14px !important; }
  /* actividad reciente: tabla → lista */
  html body #inicio .dashboard-compact table, html body #inicio .dashboard-compact tbody, html body #inicio .dashboard-compact tr, html body #inicio .dashboard-compact td { display: block !important; width: auto !important; }
  html body #inicio .dashboard-compact thead { display: none !important; }
  html body #inicio .dashboard-compact tr { padding: 10px 0 !important; border-bottom: 1px solid var(--m-line) !important; display: flex !important; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
  html body #inicio .dashboard-compact tr:last-child { border-bottom: 0 !important; }
  html body #inicio .dashboard-compact td { padding: 0 !important; border: 0 !important; font-size: 14px !important; color: var(--m-mut) !important; }
  html body #inicio .dashboard-compact td:nth-child(1) { order: 3; font-size: 12.5px !important; }
  html body #inicio .dashboard-compact td:nth-child(2) { order: 1; flex: 1 1 60%; color: var(--m-ink) !important; font-weight: 700; font-size: 15.5px !important; }
  html body #inicio .dashboard-compact td:nth-child(3) { order: 2; flex: 0 0 auto; }
  html body #inicio .dashboard-compact td:nth-child(n+4) { order: 4; }

  /* ================= AGENDA ================= */
  html body #calendario .ag-navgroup { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: stretch !important; }
  html body #calendario .month-navi { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 6px; }
  html body #calendario .month-title { font-size: 17px !important; font-weight: 800 !important; }
  html body #calendario .ag-strip { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  html body #calendario .ag-strip .summary { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; width: 100% !important; }
  html body #calendario .ag-strip .summary .mini-card { padding: 10px 12px !important; }
  html body #calendario .ag-strip .summary .mini-card span { font-size: 12px !important; color: var(--m-mut) !important; font-weight: 700 !important; }
  html body #calendario .ag-strip .summary .mini-card strong { font-size: 22px !important; font-weight: 800 !important; }
  html body #calendario #btnSyncAgenda, html body #calendario #btnBloquearAgenda, html body #calendario #btnRecCobro, html body #calendario #btnRecCuadre { flex: 1 1 calc(50% - 8px) !important; font-size: 13.5px !important; }
  html body #calendario #newAppointmentBtn { position: fixed !important; right: 18px; bottom: 104px; z-index: 5800; height: 52px !important; min-height: 52px !important; padding: 0 20px !important; border-radius: 26px !important; box-shadow: 0 8px 20px rgba(2,132,199,.4) !important; flex: none !important; width: auto !important; }
  html body #calendario .week-list .wl-day { border-radius: 16px !important; background: var(--m-card) !important; box-shadow: var(--m-sh) !important; border: 0 !important; overflow: hidden; margin-bottom: 12px !important; }

  /* ================= PACIENTES ================= */
  html body #patientsToolbar { display: block !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
  html body #patientsToolbar .patients-toolbar-left { display: block !important; }
  html body #patientSearch { height: 44px !important; border-radius: 12px !important; background: #E3E8F0 !important; border: 0 !important; font-size: 16px !important; padding-left: 38px !important; }
  html body #patientsToolbar .patients-toolbar-actions { display: flex !important; flex-wrap: wrap; gap: 8px !important; margin-top: 10px !important; }
  html body #patientsToolbar .sort-select-wrap, html body #patientsToolbar #rxOnlyFilterBtn, html body #patientsToolbar #patientNewCareBtn { display: none !important; }
  html body #patientsToolbar #patFilterBtn, html body #patientsToolbar #newPatientBtn { flex: 1 1 calc(50% - 8px); min-height: 44px; justify-content: center; }
  html body #patientsToolbar #newPatientBtn { background: var(--m-acc) !important; color: #fff !important; border: 0 !important; }
  html body #patientList { background: var(--m-card) !important; border-radius: 16px !important; box-shadow: var(--m-sh) !important; padding: 0 !important; gap: 0 !important; overflow: hidden; }
  html body #patientList .patient-item.pi2 { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--m-line) !important; padding: 12px 14px !important; min-height: 64px !important; background: transparent !important; }
  html body #patientList .patient-item.pi2:last-child { border-bottom: 0 !important; }
  html body .patient-top-pagination { font-size: 13px !important; color: var(--m-mut) !important; }

  /* ================= ATENCIONES ================= */
  html body #atenciones .atencion-card, html body #atenciones .care-card, html body #atenciones .att-card { border-radius: 16px !important; box-shadow: var(--m-sh) !important; border: 0 !important; }

  /* ================= GASTOS ================= */
  html body #gastos .table-wrap { background: transparent !important; box-shadow: none !important; overflow: visible !important; }
  html body #gastos table, html body #gastos tbody, html body #gastos tr, html body #gastos td { display: block !important; width: auto !important; }
  html body #gastos thead, html body #gastos tfoot { display: none !important; }
  html body #gastos tbody { background: var(--m-card); border-radius: 16px; box-shadow: var(--m-sh); overflow: hidden; }
  html body #gastos tbody tr { display: grid !important; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px !important; border-bottom: 1px solid var(--m-line) !important; align-items: center; }
  html body #gastos tbody tr:last-child { border-bottom: 0 !important; }
  html body #gastos tbody td { padding: 0 !important; border: 0 !important; font-size: 13.5px !important; color: var(--m-mut) !important; background: transparent !important; }
  html body #gastos tbody td:nth-child(1), html body #gastos tbody td:nth-child(5), html body #gastos tbody td:nth-child(7), html body #gastos tbody td:nth-child(9) { display: none !important; }
  html body #gastos tbody td:nth-child(4) { grid-column: 1; grid-row: 1; color: var(--m-ink) !important; font-weight: 700; font-size: 16px !important; }
  html body #gastos tbody td:nth-child(6) { grid-column: 2; grid-row: 1 / span 2; font-weight: 800; color: var(--m-ink) !important; font-size: 16px !important; text-align: right; }
  html body #gastos tbody td:nth-child(3) { grid-column: 1; grid-row: 2; display: inline-block !important; }
  html body #gastos tbody td:nth-child(2) { display: none !important; }
  html body #gastos .exp-foot { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  html body #gastos .exp-foot .mini-card { padding: 14px !important; }
  html body #gastos .exp-foot .mini-card strong { font-size: 22px !important; }
  html body #gastos .exp-acts { display: flex; gap: 8px; }
  html body #gastos .exp-acts .cta { flex: 1; }

  /* ================= ESTADÍSTICA / REPORTES / INVENTARIO / PLAN / RX / RECORDATORIOS ================= */
  html body #analitica .card, html body #reportes .card, html body #inventario .card, html body #presupuestos .card, html body #radiografias .card, html body #recordatorios .card { border-radius: 16px !important; }
  html body #presupuestos .view-segmented-control, html body #recordatorios .view-segmented-control, html body #inventario .view-segmented-control { margin: 10px 0 !important; }

  /* ================= VENTANAS (hojas inferiores) ================= */
  html body .modal-overlay:not(.hidden) { align-items: flex-end !important; padding: 0 !important; background: rgba(15,23,42,.38) !important; }
  html body .modal-overlay:not(.hidden) > .modal, html body .modal-overlay:not(.hidden) > div:first-child { width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 26px 26px 0 0 !important; max-height: 92dvh !important; box-sizing: border-box; }
  html body .modal-overlay .modal input, html body .modal-overlay .modal select, html body .modal-overlay .modal textarea { min-height: 48px; border-radius: 12px !important; font-size: 16px !important; }
  html body .modal-overlay .modal button.cta { width: 100%; }
}

/* ===== Parte 2: encabezado, listas y ajustes de especificidad ===== */
@media (max-width: 768px) {
  /* Encabezado superior: título grande + acciones; sin chips de escritorio */
  html body header { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; padding: 6px 16px 0 !important; background: var(--m-bg) !important; border: 0 !important; box-shadow: none !important; min-height: 52px; }
  html body header #sidebarToggleBtn, html body header .date-chip, html body header #headerThemeSwitch, html body header .hd-sep, html body header .hd-slash, html body header #hdCrumb, html body header .hd-name, html body header .hd-me > svg, html body header #sucBar:empty { display: none !important; }
  html body header .hd-title { flex: 1 1 auto; min-width: 0; }
  html body header #hdTitle { font-size: 32px !important; font-weight: 800 !important; letter-spacing: -.02em !important; line-height: 1.1; color: var(--m-ink) !important; }
  html body header .toolbar { display: flex !important; align-items: center; gap: 8px !important; flex: none; margin-left: auto; }
  html body header #hdActionBtn, html body header #hdActionBtn2 { min-height: 44px !important; padding: 0 14px !important; }
  html body header #hdActionBtn2 span, html body header #hdActionBtn span { font-size: 14px !important; }
  html body header #cloudSyncChip { height: 32px; font-size: 12px !important; }
  html body header .hd-av { width: 40px !important; height: 40px !important; }
  html body header .hd-me { min-height: 44px; min-width: 44px; }
  html body #pacientes .patients-toolbar-left .patients-panel-title { display: none !important; }

  /* ---- Inicio: mayor especificidad ---- */
  html body section#inicio .ini-greet h2#inicioGreeting { font-size: 26px !important; font-weight: 800 !important; margin: 0 !important; }
  html body section#inicio .ini-qa .ini-qa-btn .ic { width: 56px !important; height: 56px !important; border-radius: 16px !important; background: var(--m-accS) !important; color: var(--m-accT) !important; display: grid !important; place-items: center !important; }
  html body section#inicio .ini-qa .ini-qa-btn .ic svg { width: 26px !important; height: 26px !important; }
  html body section#inicio .ini-qa .ini-qa-btn.main .ic { background: var(--m-acc) !important; color: #fff !important; }
  html body section#inicio .ini-qa .ini-qa-btn { background: transparent !important; border: 0 !important; box-shadow: none !important; }
  html body section#inicio .summary .mini-card .mi-tx { display: block !important; padding: 0 !important; }
  html body section#inicio .summary .mini-card .mi-tx span { display: block !important; font-size: 13px !important; font-weight: 700 !important; color: var(--m-mut) !important; text-transform: none !important; letter-spacing: 0 !important; white-space: normal !important; line-height: 1.2; }
  html body section#inicio .summary .mini-card .mi-tx strong { display: block !important; font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.02em; margin-top: 2px; color: var(--m-ink) !important; }
  html body section#inicio .summary .mini-card.gold .mi-tx strong { color: var(--m-warn) !important; }
  /* Citas de hoy: filas limpias */
  html body section#inicio .today-schedule-box { border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; }
  html body section#inicio .today-schedule-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--m-mut); margin-bottom: 8px; }
  html body section#inicio .timeline-v-point, html body section#inicio .timeline-v-node, html body section#inicio .today-duration-pill, html body section#inicio .timeline-v-duration-badge { display: none !important; }
  html body section#inicio .timeline-v-item { display: flex !important; align-items: center; gap: 12px; padding: 10px 0 !important; border-bottom: 1px solid var(--m-line) !important; margin: 0 !important; }
  html body section#inicio .timeline-v-item:last-child { border-bottom: 0 !important; }
  html body section#inicio .timeline-v-col-time { width: 56px; flex: none; }
  html body section#inicio .timeline-v-time-stack { display: flex; flex-direction: column; font-weight: 800; color: var(--m-accT); font-size: 15px; }
  html body section#inicio .v-time-end { font-size: 12px !important; font-weight: 500 !important; color: var(--m-mut) !important; }
  html body section#inicio .timeline-v-card { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: space-between; gap: 8px; }
  html body section#inicio .timeline-v-patient { font-size: 16px !important; font-weight: 700 !important; color: var(--m-ink) !important; }
  html body section#inicio .timeline-v-proc { font-size: 13.5px !important; color: var(--m-mut) !important; }
  html body section#inicio .timeline-v-footer .icon-btn { width: 40px; height: 40px; min-width: 40px; min-height: 40px; background: var(--m-fill) !important; border: 0 !important; }

  /* ---- Agenda ---- */
  html body section#calendario .view-segmented-control { width: 100% !important; }
  html body section#calendario .wl-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
  html body section#calendario .wl-day-title b { font-size: 17px; font-weight: 800; }
  html body section#calendario .wl-card { display: flex !important; align-items: center; gap: 12px; padding: 10px 14px !important; border-left: 5px solid var(--m-acc) !important; background: var(--m-card) !important; border-radius: 0 !important; }
  html body section#calendario .wl-card.confirmed { border-left-color: #16A34A !important; }
  html body section#calendario .wl-time { font-weight: 800 !important; color: var(--m-accT) !important; min-width: 46px; font-family: inherit !important; font-size: 15px !important; }
  html body section#calendario .wl-name { font-weight: 700 !important; font-size: 16px !important; color: var(--m-ink) !important; }
  html body section#calendario .wl-meta { font-size: 13.5px !important; color: var(--m-mut) !important; }
  html body section#calendario .wl-check, html body section#calendario .wl-add { min-width: 40px; min-height: 40px; border-radius: 20px !important; }

  /* ---- Pacientes: filas con avatar ---- */
  html body section#pacientes .p-split { display: block !important; }
  html body section#pacientes .patient-top-pagination > div { display: flex; justify-content: space-between; align-items: center; background: transparent !important; border: 0 !important; padding: 4px 2px !important; }
  html body section#pacientes .pv-switch { display: none !important; }
  html body section#pacientes #patientList .patient-item.pi2 { display: grid !important; grid-template-columns: 44px 1fr auto !important; grid-template-areas: "av head debe" "av last debe"; align-items: center; column-gap: 12px !important; row-gap: 0 !important; text-align: left; }
  html body section#pacientes #patientList .pi2-top, html body section#pacientes #patientList .pi2-head, html body section#pacientes #patientList .pi2-last { display: contents !important; }
  html body section#pacientes #patientList .pi2-av { display: grid !important; grid-area: av; place-items: center; width: 44px; height: 44px; border-radius: 22px; color: #fff; font-weight: 800; font-size: 15px; background: linear-gradient(160deg, color-mix(in srgb, var(--tone, #0284C7) 70%, #fff), var(--tone, #0284C7)); }
  html body section#pacientes #patientList .pi2-name { grid-area: head; font-size: 16px !important; font-weight: 700 !important; color: var(--m-ink) !important; align-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body section#pacientes #patientList .pi2-id, html body section#pacientes #patientList .pi2-num { display: none !important; }
  html body section#pacientes #patientList .pi2-cita, html body section#pacientes #patientList .pi2-date { grid-area: last; font-size: 13.5px !important; color: var(--m-mut) !important; align-self: start; }
  html body section#pacientes #patientList .pi2-debe { grid-area: debe; background: var(--m-badS); color: var(--m-bad) !important; border-radius: 12px; padding: 3px 9px; font-size: 12.5px !important; font-weight: 800; }
  html body section#pacientes #patientList .pi2-ok { grid-area: debe; color: var(--m-ok) !important; font-size: 12.5px !important; font-weight: 700; }

  /* ---- Gastos ---- */
  html body section#gastos #expChips { margin: 8px 0 !important; }
  html body section#gastos tbody td:nth-child(8) { display: none !important; }
}

@media (max-width: 768px) {
  html body header .hd-title { display: block !important; }
  html body section#inicio .ini-qa .ini-qa-btn .ic { height: 56px !important; min-height: 56px !important; flex: none !important; }
  html body section#pacientes #patientList .pi2-debe { align-self: center; justify-self: end; height: auto !important; line-height: 1.4; white-space: nowrap; }
  html body section#gastos .exp-foot { margin-top: 12px !important; }
}

/* ===== Parte 3: títulos duplicados, Atenciones como tarjetas, estado de nube compacto ===== */
@media (max-width: 768px) {
  html body .panel:not(#inicio) h2.panel-title, html body .panel:not(#inicio) .panel-title-row > h2, html body #radiografias .rx-title, html body #recordatorios h2:first-of-type { display: none !important; }
  html body header #cloudSyncChip { width: 32px; padding: 0 !important; justify-content: center; }
  html body header #cloudSyncText { display: none !important; }
  html body header .hd-av { width: 40px !important; height: 40px !important; }
  html body header { flex-wrap: nowrap !important; }

  /* Atenciones: tabla → tarjetas */
  html body #atenciones .table-wrap { background: transparent !important; box-shadow: none !important; overflow: visible !important; }
  html body #atenciones table, html body #atenciones tbody { display: block !important; width: auto !important; }
  html body #atenciones thead { display: none !important; }
  html body #atenciones tbody#careRows { background: var(--m-card); border-radius: 16px; box-shadow: var(--m-sh); overflow: hidden; }
  html body #atenciones tr.care-card { display: grid !important; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 12px 14px !important; border: 0 !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; align-items: center; margin: 0 !important; }
  html body #atenciones tr.care-card:last-child { border-bottom: 0 !important; }
  html body #atenciones tr.care-card > td { display: block !important; padding: 0 !important; border: 0 !important; background: transparent !important; font-size: 13.5px !important; color: var(--m-mut) !important; width: auto !important; min-width: 0; }
  html body #atenciones tr.care-card > td:nth-child(3), html body #atenciones tr.care-card > td:nth-child(4), html body #atenciones tr.care-card > td:nth-child(6), html body #atenciones tr.care-card > td:nth-child(9), html body #atenciones tr.care-card > td:nth-child(10) { display: none !important; }
  html body #atenciones tr.care-card > td:nth-child(5) { grid-column: 1; grid-row: 1; color: var(--m-ink) !important; font-size: 16px !important; }
  html body #atenciones tr.care-card > td:nth-child(5) b { font-weight: 800; }
  html body #atenciones tr.care-card > td:nth-child(2) { grid-column: 1; grid-row: 2; }
  html body #atenciones tr.care-card > td:nth-child(1) { grid-column: 1; grid-row: 3; font-size: 12.5px !important; }
  html body #atenciones tr.care-card > td:nth-child(7) { grid-column: 2; grid-row: 1; text-align: right; color: var(--m-ink) !important; font-weight: 800; font-size: 16px !important; }
  html body #atenciones tr.care-card > td:nth-child(7) .small { display: none; }
  html body #atenciones tr.care-card > td:nth-child(8) { grid-column: 2; grid-row: 2; text-align: right; }
  html body #atenciones tr.care-card > td:nth-child(11) { grid-column: 2; grid-row: 3; text-align: right; }
  html body #atenciones .pill { border-radius: 12px !important; font-weight: 700 !important; font-size: 12.5px !important; padding: 2px 9px !important; }
}

/* ===== Parte 4: Planificación, Inventario, Estadística, Reportes, Recordatorios, Radiografías ===== */
@media (max-width: 768px) {
  /* Control segmentado reutilizable */
  html body #plSeg, html body .iv-row:first-child, html body #anRangeBtns, html body #recordatorios nav.nav-tabs {
    display: flex !important; gap: 0 !important; background: #E3E8F0 !important; border-radius: 11px !important; padding: 3px !important; overflow-x: auto; scrollbar-width: none; border: 0 !important; margin: 10px 0 !important;
  }
  html body #plSeg > button, html body .iv-row:first-child > .iv-tab, html body #anRangeBtns > button, html body #recordatorios nav.nav-tabs > .nav-tab-btn {
    flex: 1 0 auto; min-height: 36px !important; border-radius: 9px !important; border: 0 !important; background: transparent !important; color: var(--m-ink2) !important; font-weight: 700 !important; font-size: 14px !important; padding: 0 12px !important; white-space: nowrap; box-shadow: none !important;
  }
  html body #plSeg > button.on, html body .iv-row:first-child > .iv-tab.on, html body #anRangeBtns > button.active, html body #anRangeBtns > button.on, html body #recordatorios nav.nav-tabs > .nav-tab-btn.active {
    background: #fff !important; color: var(--m-ink) !important; box-shadow: 0 1px 3px rgba(15,23,42,.18) !important;
  }
  html body #recordatorios nav.nav-tabs .t-long { display: none !important; }
  html body #recordatorios nav.nav-tabs .t-short { display: inline !important; }
  html body #recordatorios nav.nav-tabs > .nav-tab-btn::after, html body #recordatorios nav.nav-tabs > .nav-tab-btn::before { display: none !important; }

  /* Planificación */
  html body #presupuestos .pl-stats { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  html body #presupuestos .pl-stat { background: var(--m-card) !important; border: 0 !important; border-radius: 16px !important; box-shadow: var(--m-sh) !important; padding: 12px !important; text-align: left !important; }
  html body #presupuestos .pl-stat > :first-child { font-size: 26px !important; font-weight: 800 !important; }
  html body #presupuestos .pl-head > span { display: flex !important; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  html body #presupuestos .pl-head > span > button { flex: 1 1 calc(50% - 8px); min-height: 44px; }
  html body #presupuestos #plNew { flex-basis: 100% !important; }
  html body #presupuestos .pl-tools { display: flex !important; gap: 8px; margin-top: 10px; }
  html body #presupuestos .pl-tools input { flex: 1; min-height: 44px; border-radius: 12px; background: #E3E8F0 !important; border: 0 !important; }
  html body #presupuestos .pl-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-top: 10px; }
  html body #presupuestos .pl-chips > button { min-height: 36px; border-radius: 18px !important; white-space: nowrap; }

  /* Inventario */
  html body #inventario .iv-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  html body #inventario .iv-card { background: var(--m-card) !important; border: 0 !important; border-radius: 16px !important; box-shadow: var(--m-sh) !important; padding: 14px !important; }
  html body #inventario .iv-card > div:nth-child(1) { font-size: 13px !important; font-weight: 700 !important; color: var(--m-mut) !important; }
  html body #inventario .iv-card > div:nth-child(2) { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.02em; }
  html body #inventario .iv-row { gap: 8px; }
  html body #inventario .iv-search, html body #inventario #ivQ { min-height: 44px; border-radius: 12px !important; background: #E3E8F0 !important; border: 0 !important; }
  html body #inventario .report-header-row { display: block !important; }

  /* Estadística */
  html body #analitica .report-header-row { display: block !important; }
  html body #analitica #anBody > div:first-child { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; overflow: visible !important; }
  html body #analitica #anBody > div:first-child > div:first-child { grid-column: 1 / -1; border-radius: 16px !important; }
  html body #analitica #anBody > div:first-child > div { min-width: 0 !important; width: auto !important; border-radius: 16px !important; }

  /* Reportes */
  html body #reportes .report-header-row { display: block !important; }
  html body #reportes .report-download-group { display: flex !important; flex-direction: column !important; gap: 0 !important; background: var(--m-card); border-radius: 16px; box-shadow: var(--m-sh); overflow: hidden; margin: 12px 0 !important; }
  html body #reportes .report-download-group .report-summary-dropdown-container { width: 100%; }
  html body #reportes .report-download-group .report-action-btn { width: 100% !important; min-height: 56px !important; border: 0 !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important; background: transparent !important; justify-content: flex-start !important; padding: 0 16px !important; font-size: 16px !important; font-weight: 700 !important; color: var(--m-ink) !important; box-shadow: none !important; }
  html body #reportes .report-download-group > .report-action-btn:last-child { border-bottom: 0 !important; }
  html body #reportes .report-period-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap !important; }
  html body #reportes .report-chip-btn { min-height: 36px; border-radius: 18px !important; white-space: nowrap; }
  html body #reportes .report-date-inputs { display: flex !important; gap: 10px; }
  html body #reportes .report-date-field { flex: 1; }

  /* Recordatorios */
  html body #recordatorios #autoRemindersControlCard { border-radius: 16px !important; box-shadow: var(--m-sh) !important; }

  /* Radiografías: sin columnas; lista de pacientes primero */
  html body #radiografias .rx-split-layout { display: flex !important; flex-direction: column !important; gap: 12px !important; }
  html body #radiografias .rx-patients-col, html body #radiografias .rx-timeline-col { width: 100% !important; max-width: 100% !important; border-radius: 16px !important; box-shadow: var(--m-sh) !important; border: 0 !important; background: var(--m-card) !important; }
  html body #radiografias .rx-header-actions { display: flex !important; gap: 8px; flex-wrap: wrap; }
  html body #radiografias .rx-header-actions > button { flex: 1 1 calc(50% - 8px); min-height: 44px; }
  html body #radiografias .rx-header-actions > .cta { flex-basis: 100%; }
  html body #radiografias .rx-search-box input { min-height: 44px; border-radius: 12px !important; background: #E3E8F0 !important; border: 0 !important; }

  /* Atenciones: acciones compactas */
  html body #atenciones tr.care-card > td:nth-child(11) { grid-column: 1 / -1 !important; grid-row: 4 !important; text-align: right; }
  html body #atenciones tr.care-card > td:nth-child(11) button { min-height: 36px !important; }
  html body #atenciones tr.care-card > td { height: auto !important; min-height: 0 !important; }
}

@media (max-width: 768px) {
  html body .iv-row:first-child { flex-wrap: nowrap !important; }
  html body #recordatorios nav.nav-tabs { flex-wrap: nowrap !important; }
}

/* ===== Parte 5: ventanas como hojas inferiores (antes se salían de la pantalla) ===== */
@media (max-width: 768px) {
  html body .modal-overlay:not(.hidden) { align-items: flex-end !important; justify-content: center !important; padding: 0 !important; background: rgba(15,23,42,.38) !important; }
  html body .modal-overlay:not(.hidden) > .modal-card { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; border-radius: 26px 26px 0 0 !important; max-height: 94dvh !important; box-sizing: border-box !important; background: var(--m-bg) !important; box-shadow: 0 -10px 40px rgba(15,23,42,.25) !important; }
  html body .modal-overlay:not(.hidden) > .modal-card::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 3px; background: #CBD5E1; margin: 8px auto 0; }
  html body .modal-card .qc2-grid, html body .modal-card .qc3-grid { grid-template-columns: 1fr !important; }
  html body .modal-card [class*="grid"][style*="grid-template-columns"] { max-width: 100%; }
  html body .modal-card input:not([type=checkbox]):not([type=radio]), html body .modal-card select, html body .modal-card textarea { min-height: 48px; border-radius: 12px !important; font-size: 16px !important; max-width: 100%; }
  html body .modal-card .cta, html body .modal-card button.secondary { min-height: 48px; border-radius: 14px !important; }
  html body .modal-card > * { max-width: 100%; }
}

@media (max-width: 768px) {
  html body .modal-overlay:not(.hidden) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; align-items: end !important; justify-items: stretch !important; }
  html body #quickCareModal #quickCareForm[data-step="all"] .qc2-grid.qc3-grid, html body #quickCareModal .qc2-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
}

@media (max-width: 768px) {
  html body :is(#exportSummaryModal,#privacyLockModal,#remindersMassSendModal,#expenseModal,#rxUploadModal,#blockScheduleModal,#exportPatientPdfModal,#corteModal,#auditModal,#consentReaderModal,#consentSignatureModal,#appointmentModal,#quickCareModal,#patientModal,#patientAttachmentsModal,#settingsDrawer,#liquidacionesModal,#pdfViewerModal)[data-size][data-size][data-size] .modal-card,
  html body :is(#exportSummaryModal,#privacyLockModal,#remindersMassSendModal,#expenseModal,#rxUploadModal,#blockScheduleModal,#exportPatientPdfModal,#corteModal,#auditModal,#consentReaderModal,#consentSignatureModal,#appointmentModal,#quickCareModal,#patientModal,#patientAttachmentsModal,#settingsDrawer,#liquidacionesModal,#pdfViewerModal) .modal-card {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; zoom: 1 !important; transform: none !important; border-radius: 26px 26px 0 0 !important; max-height: 94dvh !important;
  }
}