/* ============================================================
   CoparentandoApp — Design System (mockups)
   Material Design alineado a MUI for Figma v6.1.0 (Material UI 7).
   Íconos: Material Symbols Rounded · Tipografía: Roboto.
   Paleta calmada y tono empático. Ver REGLA #3 en CLAUDE.md.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Paleta canónica */
  --azul-profundo: #1F3D5C;
  --azul-claro: #2E6FA8;
  --verde-acuerdo: #3FA787;
  --amarillo-pendiente: #E7B14C;
  --rojo-alerta: #D46A60;
  --gris-calido: #8C857A;
  --crema: #FBF9F5;
  --blanco: #FFFFFF;
  --texto: #2A2E33;
  --texto-suave: #6B7178;

  /* Fondos suaves para chips/estados */
  --verde-bg: #E6F3EE;
  --amarillo-bg: #FBF0D9;
  --rojo-bg: #F8E5E3;
  --azul-bg: #E5EDF4;
  --gris-bg: #F0EEEA;

  /* Marca proveedores de pago */
  --mp-azul: #009EE3;
  --tbk-rojo: #E1251B;

  /* Bordes y elevación (Material) */
  --borde: #ECE8E1;
  --borde-fuerte: #DED9CF;
  --elev-1: 0 1px 2px rgba(31, 61, 92, .06), 0 1px 3px rgba(31, 61, 92, .08);
  --elev-2: 0 2px 6px rgba(31, 61, 92, .06), 0 6px 16px rgba(31, 61, 92, .08);
  --elev-3: 0 6px 14px rgba(31, 61, 92, .08), 0 12px 28px rgba(31, 61, 92, .12);
  --sombra-card: var(--elev-2);
  --sombra-phone: 0 30px 60px -20px rgba(31, 61, 92, .35), 0 12px 28px rgba(31, 61, 92, .18);

  --radio: 16px;
  --radio-sm: 12px;
  --radio-lg: 28px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(1200px 600px at 80% -10%, #EAF1F7 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 10%, #F3EFE7 0%, transparent 55%),
    var(--crema);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  min-height: 100vh;
}

/* ---------- Material Symbols ---------- */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal;
  line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr;
  font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle; user-select: none;
}
.material-symbols-rounded.fill { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* ---------- Header de página (chrome, fuera del phone) ---------- */
.page-head { max-width: 1180px; margin: 0 auto; padding: 38px 28px 8px; font-family: 'Inter', sans-serif; }
.brandbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.brandbar .logo {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(140deg, var(--azul-profundo), var(--azul-claro));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 18px;
  box-shadow: 0 6px 16px rgba(31,61,92,.25);
}
.brandbar .brand-name { font-weight: 800; color: var(--azul-profundo); letter-spacing: -.2px; font-size: 17px; }
.brandbar .brand-name span { color: var(--verde-acuerdo); }
.brandbar .crumbs { margin-left: auto; font-size: 13px; color: var(--texto-suave); }
.brandbar .crumbs a { color: var(--azul-claro); text-decoration: none; font-weight: 600; }
.brandbar .crumbs a:hover { text-decoration: underline; }

.page-head h1 { font-size: 30px; letter-spacing: -.6px; color: var(--azul-profundo); margin-bottom: 8px; font-family: 'Inter', sans-serif; }
.page-head .lead { color: var(--texto-suave); max-width: 720px; font-size: 15px; }

.flow-tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--azul-bg); color: var(--azul-profundo);
  font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.flow-tag .material-symbols-rounded { font-size: 16px; }

/* ---------- Tira de pantallas ---------- */
.screens {
  display: flex; gap: 30px; flex-wrap: wrap;
  max-width: 1180px; margin: 18px auto 70px; padding: 18px 28px 40px; align-items: flex-start;
}
.screen-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.screen-label {
  font-size: 12.5px; font-weight: 700; color: var(--azul-profundo); font-family: 'Inter', sans-serif;
  background: #fff; border: 1px solid var(--borde); padding: 5px 13px; border-radius: 999px; box-shadow: var(--elev-1);
}
.screen-step { color: var(--gris-calido); font-weight: 800; }

/* ---------- Phone frame ---------- */
.phone { width: 340px; height: 720px; background: #11202E; border-radius: 44px; padding: 11px; box-shadow: var(--sombra-phone); position: relative; }
.phone::before { content: ''; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 120px; height: 26px; background: #11202E; border-radius: 0 0 16px 16px; z-index: 4; }
.screen { width: 100%; height: 100%; background: var(--crema); border-radius: 34px; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.screen-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.screen-scroll::-webkit-scrollbar { width: 0; }

/* Status bar */
.statusbar { height: 44px; flex-shrink: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 22px 6px; font-size: 13px; font-weight: 700; color: var(--texto); }
.statusbar .dots { display: flex; gap: 5px; align-items: center; }
.statusbar .dots .material-symbols-rounded { font-size: 17px; }

/* ---------- App top bar ---------- */
.appbar { padding: 8px 14px 14px; display: flex; align-items: center; gap: 10px; background: var(--crema); }
.appbar.azul { background: var(--azul-profundo); color: #fff; }
.appbar .title { font-weight: 700; font-size: 18px; letter-spacing: -.2px; }
.appbar .sub { font-size: 12px; opacity: .85; }
.appbar .icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); color: inherit; cursor: pointer; border: none; transition: background .2s; }
.appbar .icon-btn:hover { background: rgba(255,255,255,.26); }
.appbar:not(.azul) .icon-btn { background: transparent; color: var(--azul-profundo); }
.appbar:not(.azul) .icon-btn:hover { background: var(--gris-bg); }
.appbar .icon-btn .material-symbols-rounded { font-size: 23px; }
.appbar .spacer { flex: 1; }

/* ---------- Contenido ---------- */
.content { padding: 16px 18px 26px; display: flex; flex-direction: column; gap: 14px; }
.section-title { font-size: 12px; font-weight: 700; color: var(--gris-calido); text-transform: uppercase; letter-spacing: .8px; }
.muted { color: var(--texto-suave); font-size: 13px; }

/* ---------- Cards ---------- */
.card { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; box-shadow: var(--elev-1); }
.card.tight { padding: 13px; }
.card-row { display: flex; align-items: center; gap: 12px; }
.card h3 { font-size: 15.5px; color: var(--texto); margin-bottom: 2px; letter-spacing: -.1px; font-weight: 700; }
.card .meta { font-size: 12.5px; color: var(--texto-suave); }
.card-accent { border-left: 4px solid var(--azul-claro); }
.card-accent.verde { border-left-color: var(--verde-acuerdo); }
.card-accent.amarillo { border-left-color: var(--amarillo-pendiente); }
.card-accent.rojo { border-left-color: var(--rojo-alerta); }

/* ---------- Chips de estado ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.verde { background: var(--verde-bg); color: #2E7D63; }
.chip.amarillo{ background: var(--amarillo-bg); color: #9A6E1B; }
.chip.rojo { background: var(--rojo-bg); color: #B0463C; }
.chip.azul { background: var(--azul-bg); color: var(--azul-profundo); }
.chip.gris { background: var(--gris-bg); color: var(--gris-calido); }
.chip.solid-verde { background: var(--verde-acuerdo); color: #fff; }
.chip.no-dot::before { display: none; }
.chip .material-symbols-rounded { font-size: 14px; }

/* ---------- Avatares ---------- */
.avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff; }
.avatar.mama { background: linear-gradient(135deg,#B6577E,#D98AA8); }
.avatar.papa { background: linear-gradient(135deg,#2E6FA8,#5B9BD1); }
.avatar.nino { background: linear-gradient(135deg,#3FA787,#6FCBAE); }
.avatar.abog { background: linear-gradient(135deg,#6B7178,#9AA0A6); }
.avatar.sm { width: 30px; height: 30px; font-size: 12px; }
.avatar.lg { width: 72px; height: 72px; font-size: 26px; }

/* ---------- Botones (Material) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 600; font-size: 14.5px; padding: 13px 18px; border-radius: 12px; border: none; cursor: pointer; width: 100%; transition: box-shadow .2s, background .2s, transform .05s; }
.btn:active { transform: scale(.985); }
.btn .material-symbols-rounded { font-size: 20px; }
.btn-primary { background: var(--azul-profundo); color: #fff; box-shadow: var(--elev-1); }
.btn-primary:hover { background: #18324d; box-shadow: var(--elev-2); }
.btn-verde { background: var(--verde-acuerdo); color: #fff; box-shadow: var(--elev-1); }
.btn-verde:hover { background: #379277; box-shadow: var(--elev-2); }
.btn-ghost { background: #fff; color: var(--azul-profundo); border: 1.5px solid var(--borde-fuerte); }
.btn-ghost:hover { background: var(--gris-bg); }
.btn-soft { background: var(--azul-bg); color: var(--azul-profundo); }
.btn-soft:hover { background: #d8e4f0; }
.btn-sm { padding: 9px 14px; font-size: 13px; border-radius: 10px; width: auto; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { width: auto; flex: 1; }

/* ---------- Inputs (Material outlined) ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--texto); }
.input, .select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--borde-fuerte); border-radius: 10px; font-family: inherit; font-size: 14px; color: var(--texto); background: #fff; transition: border-color .2s, box-shadow .2s; }
.input::placeholder { color: #B4AFA6; }
.input:focus, .select:focus { outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 3px var(--azul-bg); }
.input-icon { position: relative; }
.input-icon .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--gris-calido); display: grid; place-items: center; }
.input-icon .ic .material-symbols-rounded { font-size: 20px; }
.input-icon .input { padding-left: 42px; }

/* opciones / radios */
.options { display: flex; flex-direction: column; gap: 9px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1.5px solid var(--borde-fuerte); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.opt:hover { border-color: var(--azul-claro); }
.opt.sel { border-color: var(--azul-claro); background: var(--azul-bg); }
.opt .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--borde-fuerte); flex-shrink: 0; }
.opt.sel .radio { border-color: var(--azul-claro); background: var(--azul-claro); box-shadow: inset 0 0 0 3px #fff; }
.opt .opt-title { font-weight: 600; font-size: 14px; }
.opt .opt-sub { font-size: 12px; color: var(--texto-suave); }
.opt .emoji { font-size: 22px; display: grid; place-items: center; color: var(--azul-profundo); width: 26px; }
.opt .emoji .material-symbols-rounded { font-size: 24px; }

.seg { display: flex; background: var(--gris-bg); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { flex: 1; border: none; background: transparent; font-family: inherit; font-weight: 600; font-size: 12.5px; padding: 8px; border-radius: 9px; color: var(--texto-suave); cursor: pointer; transition: background .2s, color .2s; }
.seg button.on { background: #fff; color: var(--azul-profundo); box-shadow: var(--elev-1); }

/* switch (Material) */
.switch { width: 44px; height: 26px; border-radius: 999px; background: var(--borde-fuerte); position: relative; flex-shrink: 0; cursor: pointer; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--elev-1); transition: left .2s; }
.switch.on { background: var(--verde-acuerdo); }
.switch.on::after { left: 21px; }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--borde-fuerte); }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item::before { content: ''; position: absolute; left: -25px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--azul-claro); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item.verde::before { border-color: var(--verde-acuerdo); }
.tl-item.amarillo::before { border-color: var(--amarillo-pendiente); }
.tl-item.rojo::before { border-color: var(--rojo-alerta); }
.tl-time { font-size: 11.5px; color: var(--gris-calido); font-weight: 700; }
.tl-title { font-size: 14px; font-weight: 600; margin: 1px 0 3px; }
.tl-desc { font-size: 12.5px; color: var(--texto-suave); }

/* ---------- Calendario ---------- */
.cal { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; box-shadow: var(--elev-1); }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head .mes { font-weight: 700; color: var(--azul-profundo); font-size: 15px; }
.cal-head .nav { display: flex; gap: 6px; }
.cal-head .nav button { width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--gris-bg); cursor: pointer; color: var(--azul-profundo); display: grid; place-items: center; }
.cal-head .nav button .material-symbols-rounded { font-size: 20px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-grid .dow { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--gris-calido); padding: 4px 0; }
.cal-day { aspect-ratio: 1; border-radius: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 500; color: var(--texto); position: relative; gap: 3px; }
.cal-day.off { color: #CBC6BD; }
.cal-day.hoy { background: var(--azul-profundo); color: #fff; font-weight: 700; }
.cal-day .ev { display: flex; gap: 2px; }
.cal-day .ev i { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.ev .papa { background: var(--azul-claro); }
.ev .mama { background: #C56C8E; }
.ev .verde { background: var(--verde-acuerdo); }
.ev .amarillo { background: var(--amarillo-pendiente); }
.ev .rojo { background: var(--rojo-alerta); }

.legend { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.legend span { font-size: 11.5px; color: var(--texto-suave); display: flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; }

/* ---------- Bottom nav (Material) ---------- */
.bottomnav { flex-shrink: 0; display: flex; justify-content: space-around; align-items: center; padding: 8px 8px 14px; background: #fff; border-top: 1px solid var(--borde); }
.bottomnav a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--gris-calido); text-decoration: none; cursor: pointer; }
.bottomnav a .ico { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background .2s; }
.bottomnav a .ico .material-symbols-rounded { font-size: 23px; }
.bottomnav a.on { color: var(--azul-profundo); }
.bottomnav a.on .ico { background: var(--azul-bg); }
.bottomnav a.on .ico .material-symbols-rounded { font-variation-settings: 'FILL' 1, 'wght' 500; }

/* ---------- FAB ---------- */
.fab { position: absolute; right: 16px; bottom: 82px; width: 56px; height: 56px; border-radius: 18px; background: var(--verde-acuerdo); color: #fff; border: none; cursor: pointer; box-shadow: var(--elev-3); display: grid; place-items: center; z-index: 3; transition: box-shadow .2s, background .2s; }
.fab:hover { background: #379277; }
.fab .material-symbols-rounded { font-size: 28px; }

/* ---------- Banner / aviso suave ---------- */
.notice { display: flex; gap: 11px; padding: 13px; border-radius: 14px; font-size: 12.5px; line-height: 1.45; align-items: flex-start; }
.notice .ic { flex-shrink: 0; display: grid; place-items: center; }
.notice .ic .material-symbols-rounded { font-size: 20px; }
.notice.info { background: var(--azul-bg); color: var(--azul-profundo); }
.notice.warn { background: var(--amarillo-bg); color: #8A5F12; }
.notice.calm { background: var(--verde-bg); color: #2E7D63; }

/* progress dots onboarding */
.steps-dots { display: flex; gap: 7px; justify-content: center; padding: 6px 0 2px; }
.steps-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--borde-fuerte); }
.steps-dots i.on { background: var(--azul-profundo); width: 22px; border-radius: 5px; }

/* hero / ilustración */
.hero-ill { height: 188px; border-radius: 24px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, var(--azul-profundo), var(--azul-claro) 70%, var(--verde-acuerdo)); box-shadow: var(--elev-3); }
.hero-ill .material-symbols-rounded { font-size: 76px; }

/* list rows */
.list-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--borde); }
.list-row:last-child { border-bottom: none; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .t { font-weight: 600; font-size: 14px; }
.list-row .s { font-size: 12px; color: var(--texto-suave); }
.list-row .amount { font-weight: 700; font-size: 14.5px; }

/* stat */
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.stat { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-sm); padding: 12px; text-align: center; box-shadow: var(--elev-1); }
.stat .n { font-size: 19px; font-weight: 700; color: var(--azul-profundo); }
.stat .l { font-size: 10.5px; color: var(--texto-suave); font-weight: 600; }

/* progress bar */
.bar { height: 8px; border-radius: 99px; background: var(--gris-bg); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--verde-acuerdo); }

/* thumb (icon container) */
.thumb { width: 46px; height: 46px; border-radius: 12px; background: var(--azul-bg); display: grid; place-items: center; color: var(--azul-profundo); flex-shrink: 0; }
.thumb .material-symbols-rounded { font-size: 24px; }

/* divider w/ date */
.day-sep { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.day-sep span { font-size: 11.5px; font-weight: 700; color: var(--gris-calido); }
.day-sep::before, .day-sep::after { content: ''; flex: 1; height: 1px; background: var(--borde); }

/* ---------- Pricing / planes (membresía) ---------- */
.plan { background: #fff; border: 1.5px solid var(--borde); border-radius: 18px; padding: 16px; box-shadow: var(--elev-1); position: relative; }
.plan.popular { border-color: var(--verde-acuerdo); box-shadow: var(--elev-2); }
.plan.dark { background: var(--azul-profundo); color: #fff; border-color: var(--azul-profundo); }
.plan .plan-badge { position: absolute; top: -11px; left: 16px; background: var(--verde-acuerdo); color: #fff; font-size: 10.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; box-shadow: var(--elev-1); }
.plan .plan-badge .material-symbols-rounded { font-size: 14px; }
.plan .plan-name { font-weight: 700; font-size: 16px; }
.plan.dark .plan-name { color: #fff; }
.plan .plan-desc { font-size: 12px; color: var(--texto-suave); margin-top: 1px; }
.plan.dark .plan-desc { color: rgba(255,255,255,.75); }
.plan .plan-price { display: flex; align-items: baseline; gap: 4px; margin: 10px 0 2px; }
.plan .plan-price .amt { font-size: 28px; font-weight: 800; color: var(--azul-profundo); letter-spacing: -1px; }
.plan.dark .plan-price .amt { color: #fff; }
.plan .plan-price .per { font-size: 12.5px; color: var(--texto-suave); }
.plan.dark .plan-price .per { color: rgba(255,255,255,.7); }
.plan .feat { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; padding: 5px 0; }
.plan .feat .material-symbols-rounded { font-size: 18px; color: var(--verde-acuerdo); flex-shrink: 0; }
.plan.dark .feat .material-symbols-rounded { color: #7FE0C2; }
.plan .feat.off { color: var(--gris-calido); }
.plan .feat.off .material-symbols-rounded { color: var(--borde-fuerte); }

/* ---------- Pago / checkout ---------- */
.pay-method { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1.5px solid var(--borde-fuerte); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.pay-method:hover { border-color: var(--azul-claro); }
.pay-method.sel { border-color: var(--azul-claro); background: var(--azul-bg); }
.pay-method .pay-logo { width: 52px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 11px; flex-shrink: 0; color: #fff; letter-spacing: -.2px; text-align: center; line-height: 1.05; }
.pay-logo.mp { background: var(--mp-azul); }
.pay-logo.tbk { background: #fff; color: var(--tbk-rojo); border: 1.5px solid var(--tbk-rojo); }
.pay-method .pay-name { font-weight: 600; font-size: 14px; }
.pay-method .pay-sub { font-size: 11.5px; color: var(--texto-suave); }
.pay-method .radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--borde-fuerte); flex-shrink: 0; }
.pay-method.sel .radio { border-color: var(--azul-claro); background: var(--azul-claro); box-shadow: inset 0 0 0 3px #fff; }

.summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; padding: 6px 0; }
.summary-row.total { font-weight: 700; font-size: 16px; color: var(--azul-profundo); border-top: 1px dashed var(--borde-fuerte); margin-top: 6px; padding-top: 12px; }
.secure-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--gris-calido); justify-content: center; }
.secure-badge .material-symbols-rounded { font-size: 16px; color: var(--verde-acuerdo); }

/* ---------- Perfil / Mis escritos ---------- */
.profile-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0 4px; text-align: center; }
.profile-head .pname { font-weight: 700; font-size: 18px; color: var(--texto); }
.profile-head .pmeta { font-size: 12.5px; color: var(--texto-suave); }
.plan-tag { display: inline-flex; align-items: center; gap: 5px; background: linear-gradient(135deg,var(--amarillo-pendiente),#F0C673); color: #6B4A0E; font-size: 11px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.plan-tag .material-symbols-rounded { font-size: 14px; }

.setting-row { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--borde); cursor: pointer; }
.setting-row:last-child { border-bottom: none; }
.setting-row .si { width: 38px; height: 38px; border-radius: 10px; background: var(--gris-bg); display: grid; place-items: center; color: var(--azul-profundo); flex-shrink: 0; }
.setting-row .si .material-symbols-rounded { font-size: 21px; }
.setting-row .grow { flex: 1; }
.setting-row .t { font-weight: 600; font-size: 14px; }
.setting-row .s { font-size: 12px; color: var(--texto-suave); }
.setting-row .chev { color: var(--gris-calido); display: grid; place-items: center; }

.escrito-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.escrito-row:last-child { border-bottom: none; }
.escrito-row .check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--borde-fuerte); flex-shrink: 0; margin-top: 1px; display: grid; place-items: center; color: #fff; }
.escrito-row .check.on { background: var(--azul-claro); border-color: var(--azul-claro); }
.escrito-row .check .material-symbols-rounded { font-size: 16px; }
.escrito-row .etype { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.escrito-row .etype .material-symbols-rounded { font-size: 20px; }
.etype.azul { background: var(--azul-bg); color: var(--azul-profundo); }
.etype.verde { background: var(--verde-bg); color: #2E7D63; }
.etype.amarillo { background: var(--amarillo-bg); color: #9A6E1B; }
.etype.gris { background: var(--gris-bg); color: var(--gris-calido); }
.escrito-row .grow { flex: 1; min-width: 0; }
.escrito-row .t { font-weight: 600; font-size: 13.5px; }
.escrito-row .s { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; }

/* barra de selección flotante */
.select-bar { display: flex; align-items: center; gap: 10px; background: var(--azul-profundo); color: #fff; border-radius: 14px; padding: 11px 14px; box-shadow: var(--elev-3); }
.select-bar .grow { flex: 1; font-size: 13px; font-weight: 600; }
.select-bar .btn { width: auto; }

footer.mock-footer { text-align: center; color: var(--gris-calido); font-size: 12px; padding: 0 0 50px; font-family: 'Inter', sans-serif; }
footer.mock-footer a { color: var(--azul-claro); font-weight: 700; text-decoration: none; }

/* ============================================================
   DESKTOP / WEB (panel profesional + panel admin)
   ============================================================ */
.screens-web { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 1180px; margin: 18px auto 70px; padding: 18px 28px 40px; }
.screens-web .screen-label { margin-bottom: 4px; }

/* Browser frame */
.browser { width: 100%; max-width: 1080px; border-radius: 14px; overflow: hidden; box-shadow: var(--sombra-phone); border: 1px solid var(--borde); background: #fff; }
.browser-bar { height: 42px; background: #ECECE6; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--borde); }
.browser-bar .tl { display: flex; gap: 7px; }
.browser-bar .tl i { width: 12px; height: 12px; border-radius: 50%; }
.browser-bar .tl i:nth-child(1){ background:#E6685D; } .browser-bar .tl i:nth-child(2){ background:#F1B53E; } .browser-bar .tl i:nth-child(3){ background:#54B767; }
.browser-bar .url { flex: 1; max-width: 440px; margin: 0 auto; background: #fff; border-radius: 8px; height: 27px; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 12px; color: var(--texto-suave); border: 1px solid var(--borde); }
.browser-bar .url .material-symbols-rounded { font-size: 15px; color: var(--verde-acuerdo); }
.browser-body { display: flex; height: 660px; }

/* Sidebar */
.sidebar { width: 230px; flex-shrink: 0; background: #fff; border-right: 1px solid var(--borde); display: flex; flex-direction: column; padding: 16px 12px; }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; }
.side-brand .logo { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(140deg, var(--azul-profundo), var(--azul-claro)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px; }
.side-brand .nm { font-weight: 800; color: var(--azul-profundo); font-size: 15px; }
.side-brand .nm span { color: var(--verde-acuerdo); }
.side-sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--gris-calido); font-weight: 700; padding: 12px 12px 5px; }
.side-nav { display: flex; flex-direction: column; gap: 3px; }
.side-nav a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; color: var(--texto-suave); text-decoration: none; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.side-nav a:hover { background: var(--gris-bg); }
.side-nav a.on { background: var(--azul-bg); color: var(--azul-profundo); }
.side-nav a .material-symbols-rounded { font-size: 21px; }
.side-nav a .badge-n { margin-left: auto; background: var(--rojo-alerta); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center; padding: 0 5px; }
.side-foot { margin-top: auto; border-top: 1px solid var(--borde); padding-top: 12px; display: flex; align-items: center; gap: 10px; }
.side-foot .grow { flex: 1; min-width: 0; }
.side-foot .t { font-weight: 700; font-size: 13px; }
.side-foot .s { font-size: 11px; color: var(--texto-suave); }

/* Web main */
.web-main { flex: 1; display: flex; flex-direction: column; background: var(--crema); min-width: 0; }
.web-topbar { height: 60px; flex-shrink: 0; background: #fff; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 14px; padding: 0 22px; }
.web-topbar .wt-title { font-weight: 700; font-size: 18px; color: var(--azul-profundo); letter-spacing: -.2px; }
.web-topbar .wt-sub { font-size: 12px; color: var(--texto-suave); }
.web-topbar .wsearch { margin-left: auto; background: var(--gris-bg); border-radius: 9px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; width: 230px; color: var(--gris-calido); font-size: 13px; }
.web-topbar .wsearch .material-symbols-rounded { font-size: 19px; }
.web-topbar .wicon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--gris-bg); color: var(--azul-profundo); cursor: pointer; }
.web-content { flex: 1; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.web-content::-webkit-scrollbar { width: 8px; } .web-content::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: 8px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.kpi { background: #fff; border: 1px solid var(--borde); border-radius: 14px; padding: 15px 16px; box-shadow: var(--elev-1); }
.kpi .kl { font-size: 12px; color: var(--texto-suave); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.kpi .kl .material-symbols-rounded { font-size: 17px; color: var(--azul-claro); }
.kpi .kn { font-size: 26px; font-weight: 800; color: var(--azul-profundo); margin-top: 8px; letter-spacing: -.5px; }
.kpi .kd { font-size: 11.5px; font-weight: 700; margin-top: 3px; display: flex; align-items: center; gap: 3px; }
.kpi .kd .material-symbols-rounded { font-size: 15px; }
.kpi .kd.up { color: var(--verde-acuerdo); } .kpi .kd.down { color: var(--rojo-alerta); } .kpi .kd.flat { color: var(--gris-calido); }

/* Panel */
.panel { background: #fff; border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--elev-1); overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--borde); }
.panel-head h3 { font-size: 15px; color: var(--texto); font-weight: 700; }
.panel-head .spacer { flex: 1; }
.panel-body { padding: 6px 16px 12px; }

/* Tabs */
.tabs { display: flex; gap: 2px; }
.tabs a { padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--texto-suave); border-bottom: 2px solid transparent; cursor: pointer; }
.tabs a.on { color: var(--azul-profundo); border-bottom-color: var(--azul-profundo); }

/* Data table */
.data-table { width: 100%; }
.dt-head, .dt-row { display: grid; align-items: center; gap: 12px; padding: 11px 6px; }
.dt-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--gris-calido); font-weight: 700; border-bottom: 1px solid var(--borde); }
.dt-row { border-bottom: 1px solid var(--borde); font-size: 13.5px; }
.dt-row:last-child { border-bottom: none; }
.dt-row:hover { background: var(--gris-bg); }
.dt-row .cell-strong { font-weight: 600; }
.dt-row .cell-sub { font-size: 11.5px; color: var(--texto-suave); }
.dt-row .row-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--azul-bg); color: var(--azul-profundo); display: grid; place-items: center; }
.dt-row .row-ic .material-symbols-rounded { font-size: 19px; }

/* Bar chart */
.barchart { display: flex; align-items: flex-end; gap: 12px; height: 150px; padding: 10px 4px 0; }
.barchart .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; justify-content: flex-end; height: 100%; }
.barchart .col .b { width: 58%; border-radius: 7px 7px 0 0; background: linear-gradient(var(--azul-claro), #5b9bd1); min-height: 4px; }
.barchart .col .b.verde { background: linear-gradient(var(--verde-acuerdo), #6fcbae); }
.barchart .col .lbl { font-size: 10.5px; color: var(--texto-suave); font-weight: 600; }

/* Two-column web grid */
.web-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.web-grid.wide-left { grid-template-columns: 1.6fr 1fr; }

/* read-only badge */
.ro-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--gris-bg); color: var(--gris-calido); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.ro-badge .material-symbols-rounded { font-size: 14px; }

/* comentario privado (abogado) */
.note-priv { background: #FFF8E8; border: 1px solid #F0DFB0; border-radius: 12px; padding: 11px 13px; font-size: 12.5px; color: #7A5A12; }
.note-priv .nh { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.note-priv .nh .material-symbols-rounded { font-size: 15px; }