/* ============================================================================================
   nueva.css — ajustes propios de la Ontime nueva (/nueva/) sobre ontime.css y mezcla.css de la
   maqueta02, que no se tocan. Lo de la entrada (login A) está en acceso.css, compartido con el
   cuestionario.
   ============================================================================================ */

/* Mientras se comprueba la sesión y se cargan los datos, no se ve nada de la Home */
html.fx-cargando #app { visibility: hidden; }

/* El logotipo oficial de OPFAR (assets/OPFAR-logotipo.png) en la barra de la suite */
.suite-brand img { height: auto; max-height: 40px; object-fit: contain; }

/* El selector de farmacias marca la abierta */
.topic-list button[aria-current="true"] { border-color: var(--color-primary, #0FA3B4); font-weight: 600; }

/* Celdas sin turno con texto (vacaciones, ausencia, festivo…) */
.schedule .off { white-space: nowrap; }

/* Turnos partidos: cada tramo en su línea, para que no se salga de la celda */
.schedule .shift b { white-space: normal; line-height: 1.35; }

/* ---------- Configuración integrada: maquetas B y C para comparar (06/10/2026) ---------- */
/* Conmutador de comparación (se quita cuando se elija una) */
.cfg-comparar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; padding: 8px 10px 8px 16px;
  border: 1px dashed #bedde1; border-radius: 999px; background: #f4fafa; font-size: 13px; color: #536c73; width: fit-content; }
.cfg-comparar button { padding: 7px 14px; border: 1px solid #dce9eb; border-radius: 999px; background: #fff; font-size: 13px; cursor: pointer; }
.cfg-comparar button[aria-pressed="true"] { background: #123B44; color: #fff; border-color: #123B44; }
.cfg-comparar a { font-size: 13px; color: #0A7581; margin-left: 4px; }

/* El formulario, sin marco propio: parte de la página */
.cfg-marco { margin: 0; }
.cfg-frame { display: block; width: 100%; min-height: 480px; height: 70vh; border: 0; background: transparent; }

/* B · los 9 pasos como pestañas, con el estilo de las pestañas de Planificación */
.cfg-pasos { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.cfg-pasos button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid #dce9eb; border-radius: 999px;
  background: #fff; font-size: 13.5px; color: #24434b; cursor: pointer; }
.cfg-pasos button b { font: 400 11px 'Space Mono', monospace; color: #0a7d8a; }
.cfg-pasos button.active { background: #d8edef; color: #1c606b; border-color: #bedde1; font-weight: 600; }
.cfg-dot { width: 8px; height: 8px; border-radius: 50%; background: #c9d6d8; display: inline-block; }
.cfg-dot.ok { background: #1F9D6B; }
.cfg-dot.warn { background: #D98A1F; }

/* C · tarjetas con su estado, y la barra del apartado abierto */
.settings-grid .setting { position: relative; cursor: pointer; }
.settings-grid .setting em { position: absolute; top: 20px; right: 20px; font-style: normal; }
.tag.ok { background: #E3F4EC; color: #14694A; }
.cfg-barra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 6px; }
.cfg-miga { color: #536c73; font-size: 14px; }
.cfg-miga b { color: #123B44; }
.cfg-barra .tag { margin-left: auto; }
.cfg-pie { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 30px; }
@media (max-width: 640px) { .cfg-pasos button span { display: none; } .cfg-barra .tag { margin-left: 0; } }

/* ---------- Ficha de persona (Mi equipo) y Mi cuenta ---------- */
.ficha-cabecera { display: flex; align-items: center; gap: 18px; margin: 6px 0 22px; }
.ficha-cabecera .avatar { width: 64px; height: 64px; font-size: 22px; flex: none; }
.ficha-cabecera h1 { margin: 0 0 6px; }
.ficha-cabecera p { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.ficha-datos { display: grid; gap: 2px; }
.ficha-dato, .ficha-dia { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid #edf2f3; font-size: 14px; }
.ficha-dato:last-child, .ficha-dia:last-child { border-bottom: 0; }
.ficha-dato span, .ficha-dia span { color: #536c73; }
.ficha-dato b, .ficha-dia b { font-weight: 600; text-align: right; color: #123B44; }
.body-grid + .body-grid { margin-top: 18px; }
.cuenta-msg { font-size: 13.5px; min-height: 1em; }
.cuenta-msg.ok { color: #14694A; }
.cuenta-msg.mal { color: #D0453B; }

/* ---------- Ocupación del día ---------- */
.ocup-dias { flex-wrap: wrap; }
.ocup-grafica { display: flex; align-items: flex-end; gap: 3px; height: 180px; padding: 6px 0; border-bottom: 1px solid #dce9eb; }
.ocup-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.ocup-col i { display: block; width: 100%; background: #46a6a9; border-radius: 4px 4px 0 0; min-height: 2px; }
.ocup-col.falta i, .ocup-col.bajo-minimo i { background: #D98A1F; }
.ocup-col.sobra i { background: #9fcfd1; }
.ocup-col b { position: absolute; left: -1px; right: -1px; height: 3px; background: #123B44; border-radius: 2px; }
.ocup-resumen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Autoinspección ---------- */
.insp-cabecera { padding: 0 0 12px; }
.inspection .panel-body > div { width: 100%; }
.insp-lista { margin: 12px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: #24434b; }
details.insp-lista { padding-left: 0; }
details.insp-lista summary { cursor: pointer; color: #0A7581; font-weight: 600; margin-bottom: 6px; }
details.insp-lista ul { padding-left: 18px; margin: 0; }
.insp-ok { color: #14694A; font-size: 13.5px; margin: 10px 0 0; }

/* ---------- Mi cuenta: ventana (como la de la v5.5) ---------- */
dialog.mc-dialogo { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 26px 30px 22px; border-radius: 18px; }
.mc-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mc-cab h2 { margin: 0; color: #0A7581; }
.mc-cerrar { border: 1px solid #dce9eb; background: #fff; border-radius: 999px; width: 34px; height: 34px; font-size: 20px; line-height: 1; cursor: pointer; color: #536c73; }
.mc-perfil { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; }
.mc-cara { flex: none; }
.mc-cara .avatar { font-size: 30px; }
.mc-avas { display: grid; gap: 6px; flex: 1; min-width: 220px; }
.mc-avas small { color: #6b838a; font-size: 12px; }
.mc-fila { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mc-ava { padding: 2px; border: 1px solid #bedde1; border-radius: 50%; background: #fff; cursor: pointer; line-height: 0; }
.mc-ava:hover, .mc-ava:focus-visible { border-color: #0FA3B4; box-shadow: 0 0 0 3px rgba(15,163,180,.28); outline: none; }
.mc-subir { cursor: pointer; }
.mc-etq { display: block; font-size: 13px; color: #536c73; margin: 8px 0 5px; }
.mc-input, .mc-pass input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 14px; border: 1px solid #d6e4e6; border-radius: 11px; font: inherit; font-size: 15px; background: #fff; }
.mc-input[readonly] { background: #f3f7f8; color: #536c73; }
.mc-input:focus, .mc-pass input:focus { outline: none; border-color: #0FA3B4; box-shadow: 0 0 0 3px rgba(15,163,180,.28); }
.mc-nota { font-size: 12.5px; color: #6b838a; margin: 6px 0 0; }
.mc-sep { border-top: 1px solid #e6f0f1; margin: 16px 0 10px; }
.mc-tit { margin: 0 0 8px; font-size: 15px; color: #0A7581; }
.mc-pass { position: relative; margin-bottom: 8px; }
.mc-pass input { padding-right: 50px; }
.mc-ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: transparent; color: #536c73; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mc-ojo:hover { color: #0A7581; background: #DFF2F4; }
.mc-guardar { width: 100%; margin-top: 10px; justify-content: center; }
.mc-pie { display: flex; justify-content: center; margin-top: 12px; }
.mc-mini { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; line-height: 0; }
.mc-mini .avatar { width: 32px; height: 32px; font-size: 13px; }
.avatar.mc-equipo { overflow: hidden; line-height: 0; display: inline-flex; align-items: center; justify-content: center; }
.mc-olvido { font-size: 13px; color: #536c73; margin: -2px 0 12px; }
.mc-olvido .text-btn { font-size: 13px; padding: 0; }

/* Mi equipo · editar (D-36) */
.ficha-acciones { margin-left: auto; }
.btn.peligro { color: #B3261E; }
.btn.peligro:not(.light) { background: #B3261E; border-color: #B3261E; color: #fff; }
.emp-form { min-width: min(420px, calc(100vw - 80px)); }
.emp-chk { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; font-size: 14.5px; cursor: pointer; }
.emp-chk input { width: 18px; height: 18px; accent-color: #0FA3B4; }

/* Solicitudes · responder (D-40) */
.sol-acciones { gap: 8px; align-items: center; }
.sol-motivo { height: 90px; padding: 10px 14px; resize: vertical; }

/* Cuadrante · cambiar una casilla (D-41) */
.off-btn { background: none; border: 1px dashed transparent; border-radius: 5px; padding: 9px 7px; width: 100%; min-height: 50px; cursor: pointer; }
.off-btn:hover { border-color: #b9d4d7; }
.schedule td.a-mano { box-shadow: inset 0 -3px 0 #e3a83a; }
.leyenda-mano { display: inline-block; width: 14px; height: 3px; background: #e3a83a; vertical-align: middle; margin: 0 3px 0 6px; }
.casilla-rapidas { justify-content: flex-start !important; margin-top: 10px !important; }
.casilla-rapidas .btn { min-height: 34px; padding: 6px 11px; }

/* Ausencias en la ficha (D-42) */
.aus-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .aus-fechas { grid-template-columns: 1fr; } }

/* Festivos y guardias (D-43) */
.fest-form { display: grid; gap: 10px; border-bottom: 1px solid var(--line, #dce7e8); }
.fest-form input:not([type=checkbox]) { min-width: 0; }
.fest-quien { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.fest-quien .tag { font-size: .75rem; padding: 5px 8px; }
.gn-personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 12px; }
.gn-personas .emp-chk { margin-top: 8px; }
td.nowrap { white-space: nowrap; }
.list-table.reparto td, .list-table.reparto th { padding: 10px 14px; }

/* Farmacia sin configurar (D-46) */
.sin-configurar { margin: 0 0 23px; border-color: #0FA3B4; }
.sin-configurar h2 { margin: 0 0 8px; font-size: 1.05rem; }
.sin-configurar p { margin: 0 0 14px; color: var(--muted, #627a80); font-size: .875rem; line-height: 1.6; }

/* De la Configuración al cuadrante (D-48) */
.cfg-resumen { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: .875rem; }
.cfg-resumen th { text-align: left; font-weight: 600; padding: 7px 12px 7px 0; vertical-align: top; white-space: nowrap; color: var(--muted, #627a80); }
.cfg-resumen td { padding: 7px 0; border-bottom: 1px solid #e6eef0; }
.cfg-sub { font-size: .95rem; margin: 14px 0 8px; }
.cfg-aus { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.cfg-aus li { display: flex; gap: 12px; align-items: center; justify-content: space-between; font-size: .875rem; }
.cfg-aus select { max-width: 180px; }
.cfg-det pre { white-space: pre-wrap; font-size: .8rem; background: #f4f8f9; padding: 10px; border-radius: 8px; max-height: 260px; overflow: auto; }

/* Ausencias de todo el equipo */
.aus-filtros { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; }
.aus-filtro { display: grid; gap: 4px; font-size: .78rem; color: var(--muted, #627a80); min-width: 150px; }
.aus-filtro select { min-width: 150px; }
.aus-cuenta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* Vista del empleado (D-49) */
.ficha-dia.hoy b { color: #0FA3B4; }
.emp-avisos { list-style: none; margin: 0; padding: 0 18px 14px; display: grid; gap: 10px; }
.emp-avisos li { display: grid; gap: 2px; font-size: .85rem; border-bottom: 1px solid #e6eef0; padding-bottom: 8px; }
.emp-avisos small { color: var(--muted, #627a80); }

/* Sello de la farmacia con su logo (Inicio) */
.seal-btn { cursor: pointer; border: 0; font: inherit; }
.seal-btn:hover { box-shadow: 0 0 0 3px #ffffff55; }
.seal-logo { max-width: 150px; max-height: 92px; object-fit: contain; margin-bottom: 10px; }
/* Tus aplicaciones OPFAR: logotipo tipográfico de cada servicio (Sora 800, punto turquesa) */
.app-logo { font-family: 'Sora', sans-serif; font-weight: 800 !important; letter-spacing: -.045em; color: #123B44; }
.app-logo span { color: #0FA3B4; font-size: inherit !important; }
.product-grid .app-ir { text-align: left; border: 1px solid #d7e8ea; border-radius: 14px; padding: 17px; display: grid; gap: 7px; background: white; cursor: pointer; font: inherit; }
.product-grid .app-ir:hover { border-color: #0FA3B4; }
.product-grid .app-ir small { color: #0C8B9A; font-size: 12px; }
.app-pronto { opacity: .6; }

/* El día en el Inicio: horario con la hora, quién trabaja, ocupación */
.dia-strip { flex-wrap: wrap; }
.dia-track { min-width: 220px; }
.dia-pista { position: relative; height: 8px; border-radius: 10px; background: #e3f0f1; }
.dia-pista i { position: absolute; top: 0; bottom: 0; border-radius: 10px; background: linear-gradient(90deg, #bfe6ea, #0fa3b4); }
.dia-pista b { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #123B44; border: 3px solid white; box-shadow: 0 0 0 2px #0fa3b4; }
.dia-ejes { display: flex; justify-content: space-between; font-size: 11px; color: #749096; margin-top: 8px; }
.dia-elegir { display: flex; align-items: center; gap: 8px; }
.dia-elegir input { width: auto; min-width: 150px; }
.quien-dia { margin-bottom: 21px; }
.quien-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.quien { display: flex; align-items: center; gap: 10px; text-align: left; background: white; border: 1px solid #dfebec; border-radius: 14px; padding: 9px 12px; font: inherit; cursor: pointer; }
.quien:disabled { cursor: default; }
.quien:not(:disabled):hover { border-color: #69bbc3; }
.quien b { display: block; font-size: 13px; }
.quien small { display: block; font-size: 11px; color: #607c82; }
.quien i { margin-left: auto; font-style: normal; font-size: 10px; background: #1F9D6B; color: white; border-radius: 20px; padding: 3px 8px; }
.quien.ahora { border-color: #1F9D6B; }
.quien-fuera { font-size: 12px; color: #607c82; margin: 12px 0 0; }
.ocup-ctrl { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 720px) { .dia-elegir { width: 100%; } .dia-elegir input { flex: 1; } }
/* .opening-track div (mezcla.css) pinta cualquier div de dentro como la barra: aquí no */
.opening-track.dia-track .dia-ejes { height: auto; background: none; border-radius: 0; }
.opening-track.dia-track .dia-pista { height: 8px; background: #e3f0f1; }

/* Accesos a Ontime */
.acc-tabla td { vertical-align: middle; }
.acc-tabla input { min-width: 220px; }
.acc-pass { font-size: 1rem; background: #f1f8f8; padding: 4px 8px; border-radius: 6px; user-select: all; }

/* Casilla del cuadrante: el turno se elige (D-44) */
.cas-otro { margin: 10px 0; padding: 12px; background: #f4f9fa; border-radius: 12px; display: grid; gap: 10px; }
.cas-par { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .85rem; }
.cas-par select { width: auto; min-width: 92px; }

/* Mapa de la semana: personas / necesarias por media hora */
.mapa { border-collapse: separate; border-spacing: 2px; font-size: 11px; width: 100%; min-width: 520px; }
.mapa th { font-weight: 600; color: #607c82; padding: 2px 6px; white-space: nowrap; text-align: center; }
.mapa tbody th { text-align: right; font-family: 'Mono', monospace; font-weight: 400; }
.mapa td { text-align: center; padding: 3px 2px; border-radius: 4px; }
.mapa td small { color: inherit; opacity: .75; }
.mapa-c.ajustado, .mapa-k.ajustado { background: #d9efe6; color: #1c5b45; }
.mapa-c.falta, .mapa-k.falta, .mapa-c.bajo-minimo, .mapa-k.bajo-minimo { background: #f8dfc0; color: #7a4a10; }
.mapa-c.bajo-minimo, .mapa-k.bajo-minimo { background: #f3c9c4; color: #7a1f17; }
.mapa-c.sobra, .mapa-k.sobra { background: #e2f1f3; color: #2c6670; }
.mapa-c.sin-datos { background: #f2f6f7; color: #607c82; }
.mapa-k { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.mapa .activo { font-weight: 700; text-decoration: underline; }

/* Inicio: las tarjetas que se despliegan (quién trabaja, ocupación, día) */
.ov-wrap { position: relative; }
.ov-wrap .overview-card { width: 100%; position: relative; }
.ov-wrap.abierto .overview-card { border-color: #69bbc3; box-shadow: 0 6px 20px #123b4410; }
.ov-flecha { margin-left: auto; color: #6d9aa1; font-size: 14px; }
.ov-pop { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 25; background: white; border: 1px solid #dfebec; border-radius: 22px; box-shadow: 0 18px 40px #123b4422; padding: 14px; max-height: 460px; overflow: auto; }
.ov-persona { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 14px; padding: 8px 10px; font: inherit; cursor: pointer; }
.ov-persona:hover { background: #f1f8f8; }
.ov-persona b { display: block; font-size: 13px; }
.ov-persona small { display: block; font-size: 11px; color: #607c82; }
.ov-persona i { margin-left: auto; font-style: normal; font-size: 10px; background: #1F9D6B; color: white; border-radius: 20px; padding: 3px 8px; }
.ov-fuera { font-size: 12px; color: #607c82; margin: 8px 10px 2px; }
.ov-modo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.ov-modo button { border: 0; border-radius: 30px; padding: 10px; font: 600 14px 'Sora', sans-serif; background: #eef6f7; color: #3d6a72; cursor: pointer; }
.ov-modo button.active { background: #4aa0b0; color: white; }
.ov-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.ov-tabla th { font: 600 11px 'Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #3d5c62; background: #f3f8f9; padding: 9px; text-align: center; }
.ov-tabla td { padding: 9px 12px; border-top: 1px solid #edf3f4; font-family: 'Mono', monospace; color: #3d5c62; }
.ov-tabla td:last-child { text-align: center; }
.ov-tabla td b { display: block; font-size: 16px; }
.ov-tabla td small { display: block; font-size: 11px; opacity: .8; }
.ov-tabla td.bien { background: #e7f4ee; color: #1c5b45; }
.ov-tabla td.falta { background: #f8e6e4; color: #8a2a22; }
.ov-tabla tr[data-ovir] { cursor: pointer; }
.ov-nota { font-size: 11px; color: #6b888d; text-align: center; margin: 10px 0 0; }
.ov-cal { padding: 0; }
/* El calendario de OPFAR (Inicio y campos de fecha) */
.ot-cal { background: white; border-radius: 22px; padding: 16px 16px 10px; min-width: 280px; }
.ot-fecha-w { position: relative; display: block; }
.ot-fecha-w .ot-cal { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; border: 1px solid #dfebec; box-shadow: 0 18px 40px #123b4422; }
.ot-cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ot-cal-cab b { font: 700 16px 'Sora', sans-serif; color: #123B44; }
.ot-cal-flecha { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #dfebec; background: white; color: #1c606b; font-size: 18px; cursor: pointer; }
.ot-cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.ot-cal-dias > span { font: 600 11px 'Mono', monospace; color: #8aa0a4; padding: 4px 0; }
.ot-cal-d { border: 0; background: none; border-radius: 12px; height: 38px; font: 500 14px 'Sora', sans-serif; color: #123B44; cursor: pointer; }
.ot-cal-d:hover { background: #eef6f7; }
.ot-cal-d.fuera { color: #c3d0d2; }
.ot-cal-d.hoy { box-shadow: inset 0 0 0 1.5px #4aa0b0; }
.ot-cal-d.sel { background: #4aa0b0; color: white; }
.ot-cal-d:disabled { color: #dbe4e5; cursor: default; background: none; }
.ot-cal-pie { display: flex; justify-content: space-between; border-top: 1px solid #edf3f4; margin-top: 8px; padding-top: 8px; }
.ot-fecha { display: flex; align-items: center; gap: 8px; text-align: left; cursor: pointer; background: white; }
.ot-fecha svg { width: 16px; height: 16px; color: #4aa0b0; flex: none; }
@media (max-width: 720px) { .ov-pop { position: static; margin-top: 8px; } }

/* Cabecera: el logo de OPFAR va a Inicio y «ontime.» (con su flechita) abre las aplicaciones */
.suite-brand { display: flex; align-items: center; }
.suite-opfar, .suite-app { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; color: inherit; font: inherit; }
.suite-app { gap: 6px; border-radius: 12px; padding: 4px 8px 4px 4px; margin-left: -4px; }
.suite-app:hover, .suite-opfar:hover { opacity: .85; }
.suite-app .product-chevron { color: #739399; margin-top: 3px; }
.pharmacy-picker svg { color: #739399; flex: none; }
.pharmacy-picker.solo { cursor: default; }
/* Elegir farmacia, en lista */
.far-lista { display: grid; gap: 8px; }
.far-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: white; border: 1px solid #dfebec; border-radius: 16px; padding: 10px 14px; font: inherit; cursor: pointer; }
.far-item:hover { border-color: #99cbd1; background: #f7fbfb; }
.far-item[aria-current="true"] { border-color: #0FA3B4; background: #effafa; }
.far-ini { width: 38px; height: 38px; border-radius: 50%; background: #e3f2f4; color: #1c606b; display: inline-flex; align-items: center; justify-content: center; font: 700 13px 'Sora', sans-serif; flex: none; }
.far-txt { flex: 1; min-width: 0; }
.far-txt b { display: block; font-size: 15px; font-weight: 600; color: #123B44; }
.far-txt small { display: block; font-size: 12px; color: #6b838a; }
.far-item em { font-style: normal; font-size: 11px; font-weight: 600; background: #0FA3B4; color: white; border-radius: 20px; padding: 3px 9px; }
.far-item i { font-style: normal; font-size: 20px; color: #9ab3b8; }
.far-grupo { font-size: 13px; color: #6b838a; font-weight: 600; margin: 18px 0 8px; }
/* Mi cuenta, más ancha y armonizada: cada bloque con su botón a la derecha */
dialog.mc-dialogo { width: min(720px, calc(100vw - 32px)); padding: 28px 34px 24px; }
.mc-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.mc-dos .mc-pass { margin-bottom: 0; }
.mc-accion { display: flex; justify-content: flex-end; margin-top: 12px; }
.mc-accion .btn { min-width: 190px; justify-content: center; }
.mc-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 0; }
.mc-pie span { font-size: 13px; color: #6b838a; }
.mc-pie .btn { min-width: 190px; justify-content: center; }
@media (max-width: 640px) { .mc-dos { grid-template-columns: 1fr; } .mc-dos .mc-pass { margin-bottom: 8px; } .mc-accion .btn, .mc-pie .btn { width: 100%; } .mc-pie { flex-direction: column; gap: 8px; } }

/* Rehacer el cuadrante desde una fecha */
.rh-lista { margin: 8px 0 14px; padding-left: 18px; color: #3d5c62; font-size: 14px; line-height: 1.5; }
.rh-lista li { margin-bottom: 4px; }