/* CardioSuite visual layer for legacy module views.
   Presentation only: no form names, routes or behavior are changed. */
:root {
  --cs-ink: #0a2342;
  --cs-muted: #64748b;
  --cs-teal: #22b8b0;
  --cs-blue: #4f7ce8;
  --cs-purple: #7654e8;
  --cs-line: #dbe4ef;
  --cs-surface: #ffffff;
  --cs-bg: #f2f5f9;
}

/* Selector de módulos */
body:has(> h1) {
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 24px 56px !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif !important;
  color: var(--cs-ink) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(34, 184, 176, .14), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, var(--cs-bg) 100%) !important;
  text-align: center;
}

body:has(> h1)::before {
  content: "CardioSuite  •  Plataforma de cardiología";
  display: block;
  width: min(980px, 100%);
  margin: 0 auto 64px;
  padding: 28px 34px;
  border-bottom: 1px solid rgba(219, 228, 239, .9);
  color: var(--cs-ink);
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -.03em;
  text-align: left;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 10px 32px rgba(10, 35, 66, .07);
}

body:has(> h1) > h1 {
  margin: 0 auto 12px !important;
  color: var(--cs-ink) !important;
  font-size: clamp(30px, 5vw, 48px) !important;
  letter-spacing: -.045em;
}

body:has(> h1) > h1::after {
  content: "Selecciona el área de trabajo para continuar";
  display: block;
  margin-top: 12px;
  color: var(--cs-muted);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

body:has(> h1) > a {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 210px;
  min-height: 116px;
  margin: 26px 10px 0 !important;
  padding: 24px 28px !important;
  border: 1px solid rgba(34, 184, 176, .22);
  border-radius: 20px !important;
  color: var(--cs-ink) !important;
  background: var(--cs-surface) !important;
  box-shadow: 0 12px 28px rgba(10, 35, 66, .09);
  font-size: 17px !important;
  font-weight: 750;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body:has(> h1) > a:hover,
body:has(> h1) > a:focus-visible {
  border-color: var(--cs-teal);
  box-shadow: 0 18px 34px rgba(34, 184, 176, .2);
  outline: none;
  transform: translateY(-3px);
}

/* Formularios legacy de informes, incluida Cardio-RM */
body:has(> h2) {
  min-height: 100vh;
  margin: 0 !important;
  padding: 34px 22px 64px !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif !important;
  color: var(--cs-ink) !important;
  background: linear-gradient(180deg, #f8fbff 0%, var(--cs-bg) 100%) !important;
}

body:has(> h2) > h2,
body:has(> h2) > form,
body:has(> h2) > input[type="file"] {
  width: min(1100px, 100%);
  margin-left: auto !important;
  margin-right: auto !important;
}

body:has(> h2) > h2 {
  margin-top: 0 !important;
  padding: 24px 28px;
  border-radius: 22px;
  color: var(--cs-ink) !important;
  background: linear-gradient(110deg, #fff, #f0fbfa);
  box-shadow: 0 12px 30px rgba(10, 35, 66, .08);
  font-size: clamp(25px, 4vw, 38px) !important;
  letter-spacing: -.04em;
  text-align: left;
}

body:has(> h2) > input[type="file"] {
  display: block;
  margin-top: 18px;
  margin-bottom: 24px;
  padding: 14px;
  border: 1px dashed rgba(34, 184, 176, .65);
  border-radius: 14px;
  color: var(--cs-ink);
  background: #fff;
  font-weight: 650;
}

body:has(> h2) .form-section {
  border: 1px solid var(--cs-line) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 30px rgba(10, 35, 66, .07) !important;
}

body:has(> h2) h3.sub-title {
  color: var(--cs-ink) !important;
  border-color: rgba(34, 184, 176, .38) !important;
}

body:has(> h2) input,
body:has(> h2) textarea,
body:has(> h2) select {
  border-color: var(--cs-line) !important;
  border-radius: 10px !important;
  min-height: 40px;
}

body:has(> h2) input:focus,
body:has(> h2) textarea:focus,
body:has(> h2) select:focus {
  border-color: var(--cs-teal) !important;
  box-shadow: 0 0 0 3px rgba(34, 184, 176, .15);
  outline: none;
}

body:has(> h2) .chk-row {
  color: var(--cs-ink) !important;
  border: 1px solid rgba(34, 184, 176, .22);
  background: #eefaf9 !important;
}

body:has(> h2) button[type="submit"] {
  border-radius: 12px !important;
  background: linear-gradient(100deg, var(--cs-teal), var(--cs-blue)) !important;
  box-shadow: 0 10px 22px rgba(34, 184, 176, .2);
}

body:has(> h2) button[type="submit"]:hover,
body:has(> h2) button[type="submit"]:focus-visible {
  filter: brightness(.96);
  transform: translateY(-1px);
}

/* Ficha clínica y panel médico: solo presentación sobre las clases existentes. */
body:has(.compact-layout) {
  min-height: 100vh;
  color: var(--cs-ink) !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(34, 184, 176, .12), transparent 26%),
    linear-gradient(180deg, #f8fbff 0%, var(--cs-bg) 100%) !important;
}

body:has(.compact-layout) .navbar {
  min-height: 64px;
  padding: 10px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(110deg, var(--cs-ink), #164b77 58%, var(--cs-teal)) !important;
  box-shadow: 0 8px 24px rgba(10, 35, 66, .16);
}

body:has(.compact-layout) .navbar-brand {
  font-weight: 800;
  letter-spacing: -.025em;
}

body:has(.compact-layout) .navbar-brand::first-letter {
  color: #8af4e6;
}

body:has(.compact-layout) .navbar-brand,
body:has(.compact-layout) .navbar .nav-link {
  color: #fff !important;
  text-shadow: none !important;
}

body:has(.compact-layout) .panel-card,
body:has(.compact-layout) .left-column-custom,
body:has(.compact-layout) .main-content,
body:has(.compact-layout) .container-busqueda {
  border: 1px solid var(--cs-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 30px rgba(10, 35, 66, .07);
}

body:has(.compact-layout) .panel-card,
body:has(.compact-layout) .left-column-custom,
body:has(.compact-layout) .container-busqueda {
  overflow: hidden;
}

/* El calendario del panel médico usa texto claro sobre la columna izquierda.
   Mantener el contraste evita que las fechas desaparezcan con el fondo claro
   de la capa visual de CardioSuite. */
body:has(.compact-layout) .left-column-custom {
  color: #fff;
  background: linear-gradient(180deg, #0a2342 0%, #164b77 58%, #159b98 100%) !important;
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 12px 30px rgba(10, 35, 66, .16);
}

body:has(.compact-layout) .left-column-custom .fc .fc-daygrid-day-number,
body:has(.compact-layout) .left-column-custom .fc .fc-col-header-cell-cushion,
body:has(.compact-layout) .left-column-custom .fc .fc-toolbar-title {
  color: #fff !important;
}

body:has(.compact-layout) .left-column-custom .fc .fc-day-other .fc-daygrid-day-number {
  color: rgba(255, 255, 255, .55) !important;
}

body:has(.compact-layout) .panel-header,
body:has(.compact-layout) .main-header {
  border-bottom: 1px solid var(--cs-line);
  background: linear-gradient(110deg, #fff, #effaf9);
  color: var(--cs-ink);
}

body:has(.compact-layout) .panel-header h2,
body:has(.compact-layout) .panel-header h3,
body:has(.compact-layout) .main-header h1,
body:has(.compact-layout) .pac-nombre {
  color: var(--cs-ink) !important;
  letter-spacing: -.025em;
}

body:has(.compact-layout) .paciente-header {
  border: 1px solid rgba(34, 184, 176, .2);
  border-radius: 14px;
  background: #f0fbfa;
}

body:has(.compact-layout) .fecha-pill,
body:has(.compact-layout) .pac-meta > * {
  border-color: rgba(34, 184, 176, .22) !important;
  color: #126f72 !important;
  background: #e7f8f6 !important;
}

body:has(.compact-layout) .historial-consultas {
  scrollbar-color: var(--cs-teal) #edf3f7;
}

body:has(.compact-layout) .consulta {
  border-bottom-color: var(--cs-line) !important;
}

body:has(.compact-layout) .form-control,
body:has(.compact-layout) select,
body:has(.compact-layout) textarea,
body:has(.compact-layout) input {
  border-color: var(--cs-line) !important;
  border-radius: 10px !important;
  color: var(--cs-ink);
}

body:has(.compact-layout) .form-control:focus,
body:has(.compact-layout) select:focus,
body:has(.compact-layout) textarea:focus,
body:has(.compact-layout) input:focus {
  border-color: var(--cs-teal) !important;
  box-shadow: 0 0 0 3px rgba(34, 184, 176, .14) !important;
}

body:has(.compact-layout) .btn-primary,
body:has(.compact-layout) .btn-success,
body:has(.compact-layout) .btn-info,
body:has(.compact-layout) .btn-warning {
  border: 0 !important;
  background: linear-gradient(100deg, var(--cs-teal), var(--cs-blue)) !important;
  box-shadow: 0 7px 16px rgba(34, 184, 176, .18);
}

body:has(.compact-layout) .btn-secondary,
body:has(.compact-layout) .btn-outline-primary {
  border-color: var(--cs-ink) !important;
  color: var(--cs-ink) !important;
  background: #fff !important;
}

body:has(.compact-layout) .examenes-panel .form-check,
body:has(.compact-layout) .form-check {
  padding: 8px 10px;
  border-radius: 9px;
  transition: background .16s ease;
}

body:has(.compact-layout) .examenes-panel .form-check:hover,
body:has(.compact-layout) .form-check:hover {
  background: #eefaf9;
}

body:has(.compact-layout) .acciones-consulta {
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--cs-line);
}

@media (max-width: 700px) {
  body:has(> h1) { padding-left: 14px !important; padding-right: 14px !important; }
  body:has(> h1)::before { margin-bottom: 38px; padding: 22px 18px; }
  body:has(> h1) > a { display: flex !important; width: min(360px, 100%); margin: 16px auto 0 !important; }
  body:has(> h2) { padding-left: 12px !important; padding-right: 12px !important; }
}