/* Recordatorios (alarmas) por tarea · D18. Un solo objeto visual en todo el sistema: barra ámbar a la izquierda,
   hora en negrita y campana SVG. Color = significado: ámbar recordatorio/hoy, verde atendido, rojo sin atender.
   Texto sobre tinte ámbar: --rec-ink (8,2:1). Alturas 40/32/24; objetivos táctiles ≥ 32 px (≤ 800 px). */
:root {
  --rec: var(--ambar); --rec-bg: var(--ambar-bg); --rec-ink: #78350F; --rec-borde: #F3D9A4; --rec-latido: #F59E0B;
  --rec-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");
}
.campanita { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; font-size: 0; line-height: 0; color: var(--rec); background: currentColor; -webkit-mask: var(--rec-ico) center / contain no-repeat; mask: var(--rec-ico) center / contain no-repeat; flex: none; }
.campanita.g { width: 16px; height: 16px; vertical-align: -3px; }

/* --- barra: campana --- */
.topbar .campana { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: var(--on-navy-2); text-decoration: none; margin-right: 2px; border: 0; background: transparent; cursor: pointer; font: inherit; }
.topbar .campana:hover, .topbar .campana[aria-expanded="true"] { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.topbar .campana .n { position: absolute; top: 1px; right: 1px; min-width: 18px; height: 18px; font-size: 11px; font-weight: 700; border-radius: 999px; background: var(--rec); color: #fff; border: 2px solid var(--adm-header); box-sizing: content-box; padding: 0 3px; display: inline-flex; align-items: center; justify-content: center; }
.topbar .campana .n:empty { display: none; }
.topbar .campana.suena { color: #FCD34D; }
.topbar .campana.suena .n { background: var(--rec-latido); color: #1F2937; animation: rec-pulso 1s ease-in-out infinite; }
.topbar .campana.vencido .n { background: var(--rojo); color: #fff; }
@keyframes rec-pulso { 50% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(245,158,11,0); } }
@media (prefers-reduced-motion: reduce) { .topbar .campana.suena .n, .alerta-rec.on { animation: none; } }
.campana-panel { position: fixed; top: 68px; right: 12px; width: 380px; max-width: calc(100vw - 24px); max-height: calc(100vh - 80px); overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(16,24,40,.2); z-index: 115; padding: 12px 14px 6px; display: none; }
.campana-panel.on { display: block; }
.campana-panel h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.campana-panel h3 .n, .lado h3 .n { background: var(--navy); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; }
.campana-panel .vacio-rec, .lado .vacio-rec { color: var(--ink-2); font-size: 13px; padding: 8px 0 12px; }
@media (max-width: 800px) { .campana-panel { top: auto; bottom: 0; right: 0; left: 0; width: auto; max-width: none; border-radius: 12px 12px 0 0; max-height: 70vh; } }

/* --- lista de próximos (campana y lateral del calendario) --- */
.lado { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 6px; }
.lado h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.lado > .nota { color: var(--ink-2); margin: 10px 0 8px; }
.rec-item { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.rec-item:last-child { border-bottom: 0; }
.rec-item .cuando { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.rec-item .cuando b { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 14px; font-weight: 600; color: var(--ink); }
.rec-item .que button.tit { background: none; border: 0; padding: 0; font: inherit; text-align: left; display: block; width: 100%; font-weight: 600; line-height: 1.3; color: var(--ink); cursor: pointer; }
.rec-item .que button.tit:hover { color: var(--accent); text-decoration: underline; }
.rec-item .que .tit span { display: block; margin: 1px 0 0; font-size: 12px; font-weight: 400; color: var(--ink-2); }
.rec-item .que .nota-r { color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.rec-item .acc { display: flex; gap: 6px; margin-top: 8px; align-items: center; flex-wrap: wrap; }
.rec-item .acc button, .alerta-rec .acc button { height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid var(--line-control); color: var(--accent); background: #fff; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-family: inherit; }
.rec-item .acc button:hover, .alerta-rec .acc button:hover { background: #F1F3F6; border-color: var(--ink-3); }
.rec-item .acc button.pri, .alerta-rec .acc button.pri { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.rec-item .acc button.pri:hover, .alerta-rec .acc button.pri:hover { background: var(--accent-ink); }
.rec-item .acc [data-quitar] { margin-left: auto; width: 28px; padding: 0; border-radius: 50%; border-color: transparent; background: transparent; color: var(--ink-3); font-size: 16px; opacity: .6; justify-content: center; }
.rec-item .acc [data-quitar]:hover { opacity: 1; color: var(--rojo); background: var(--rojo-bg); border-color: transparent; }
.rec-item.hoy { background: var(--rec-bg); margin: 0 -14px; padding: 10px 14px 10px 11px; border-left: 3px solid var(--rec); border-bottom-color: #FBD38D; }
.rec-item.hoy .cuando, .rec-item.hoy .cuando b { color: var(--rec-ink); }
.rec-item.vencido { background: var(--rojo-bg); margin: 0 -14px; padding: 10px 14px 10px 11px; border-left: 3px solid var(--rojo); }
.rec-item.vencido .cuando b { color: var(--rojo); }
.rec-item.vencido .cuando::after { content: "sin atender"; display: block; font-size: 11px; font-weight: 600; color: var(--rojo); }
.rec-item.liberarse .cuando b { font-size: 12px; color: var(--rec-ink); font-family: inherit; }
.rep, .rec-lista .fila-r .para { font-size: 11px; color: var(--ink-2); background: #EEF0F4; border-radius: 999px; padding: 0 6px; margin-left: 4px; white-space: nowrap; }

/* --- formulario (ventana, lista y calendario) --- */
.rec-form { background: #fff; border: 1px solid var(--rec-borde); border-left: 4px solid var(--rec); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; font-size: 13px; }
.rec-form .ancho { grid-column: 1 / -1; }
.rec-form .titulo-f { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--accent); margin: -2px 0 -4px; }
.rec-form .atajos { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.rec-form .atajos::before { content: "Cuándo"; flex-basis: 100%; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: -2px; }
.rec-form .atajos button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-control); font-size: 13px; font-weight: 500; color: var(--ink); background: #fff; cursor: pointer; font-family: inherit; }
.rec-form .atajos button:hover { background: #F1F3F6; border-color: var(--ink-3); }
.rec-form .atajos button.on { background: var(--accent-soft); border: 2px solid var(--accent); color: var(--accent); font-weight: 600; padding: 0 11px; }
.rec-form .atajos button.liberar.on { background: var(--rec-bg); border-color: var(--rec); color: var(--rec-ink); }
.rec-form label { display: flex; flex-direction: column; font-size: 12px; font-weight: 600; color: var(--ink-2); gap: 4px; margin: 0; }
.rec-form input, .rec-form select { height: 40px; font-size: 14px; font-weight: 400; color: var(--ink); border: 1px solid var(--line-control); border-radius: 8px; padding: 0 10px; background: #fff; width: 100%; }
.rec-form input:disabled, .rec-form select:disabled { background: var(--ground); color: var(--ink-3); }
.rec-form .pie { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; align-items: center; margin-top: 2px; }
.rec-form .pie .btn-rec { height: 32px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 600; border: 1px solid var(--line-control); color: var(--accent); background: #fff; cursor: pointer; font-family: inherit; }
.rec-form .pie .btn-rec.pri { background: var(--accent); color: #fff; border: 0; }
.rec-form .pie .btn-rec.pri:hover { background: var(--accent-ink); }
.rec-form .pie .error-f { color: var(--rojo); font-size: 12px; margin-right: auto; }
.btn-nuevo-rec { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-control); background: #fff; color: var(--accent); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: inherit; align-self: flex-start; }
.btn-nuevo-rec:hover { background: #F1F3F6; }

/* --- fila de recordatorio existente (ventana y panel de la lista) --- */
.rec-lista { display: flex; flex-direction: column; gap: 6px; }
.rec-lista .fila-r { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 7px 8px 7px 10px; border: 1px solid var(--line); border-left: 3px solid var(--rec); border-radius: 8px; background: #fff; font-size: 13px; }
.rec-lista .fila-r .cuando { order: 1; font-weight: 600; color: var(--ink); font-size: 12.5px; }
.rec-lista .fila-r .x { order: 2; margin-left: auto; width: 28px; height: 28px; border-radius: 50%; border: 0; background: none; color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1; opacity: .6; cursor: pointer; }
.rec-lista .fila-r .x:hover, .rec-lista .fila-r .x:focus-visible { opacity: 1; color: var(--rojo); background: var(--rojo-bg); }
.rec-lista .fila-r .q { order: 3; flex-basis: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; color: var(--ink); }
.rec-lista .fila-r .para, .rec-lista .fila-r .rep { order: 4; font-size: 11.5px; padding: 1px 7px; margin: 0; }
.rec-lista .fila-r .origen { order: 4; font-size: 11px; color: var(--ink-2); }
.rec-lista .fila-r.hoy { background: var(--rec-bg); border-color: var(--rec-borde); }
.rec-lista .fila-r.hoy .cuando { color: var(--rec-ink); }
.rec-lista .fila-r.vencido { border-left-color: var(--rojo); }
.rec-lista .fila-r.vencido .cuando { color: var(--rojo); }
.rec-lista .ayuda-r { color: var(--ink-2); font-size: 12px; }
.rec-bloque-v { display: flex; flex-direction: column; gap: 8px; }
.rec-bloque-v .etiqueta { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* --- lista: campanita bajo el título y bloque del panel --- */
.lista-av .rec-mini { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 6px; border-radius: 999px; background: var(--rec-bg); color: var(--rec-ink); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.lista-av .rec-mini .campanita { width: 12px; height: 12px; }
.lista-av tr.abierta .rec-mini { background: #fff; }
.lista-av .rec-mini.vencido { background: var(--rojo-bg); color: var(--rojo); }
.lista-av .rec-mini.vencido .campanita { color: var(--rojo); }
.lista-av .det .campo-d.rec-bloque { grid-template-columns: 1fr; gap: 6px; }
.lista-av .det .campo-d.rec-bloque > span:first-child { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }

/* --- calendario --- */
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .cal-layout { grid-template-columns: 1fr; } }
.cal-nav { flex-wrap: wrap; gap: 10px 12px; }
.cal-nav .nota { color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.cal-filtro { display: inline-flex; gap: 2px; background: #E9ECF1; border-radius: 10px; padding: 3px; margin-left: auto; }
.cal-filtro button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #5B6672; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-family: inherit; }
.cal-filtro button:hover { background: #F1F3F6; color: var(--ink); }
.cal-filtro button.on { background: #fff; color: var(--accent); font-weight: 600; box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.cal-filtro button[data-f="limite"]::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-filtro button[data-f="rec"]::before { content: ""; width: 13px; height: 13px; background: var(--rec); -webkit-mask: var(--rec-ico) center / contain no-repeat; mask: var(--rec-ico) center / contain no-repeat; }
.cal.solo-rec .cal-tarea, .cal.solo-limite .cal-rec { display: none; }
.cal-dia { position: relative; }
.cal-num { padding-right: 32px; }
.cal-dia .mas-dia { position: absolute; top: 2px; right: 3px; width: 28px; height: 28px; border-radius: 999px; border: 1px dashed var(--line-control); background: #fff; color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; font-family: inherit; }
.cal-dia:hover .mas-dia, .cal-dia:focus-within .mas-dia, .cal-dia .mas-dia:focus-visible { opacity: 1; }
.cal-dia .mas-dia:hover { border-style: solid; border-color: var(--rec); color: var(--rec); background: var(--rec-bg); }
@media (hover: none) { .cal-dia .mas-dia { opacity: .75; } }
.cal-rec { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 3px 6px; border-left: 3px solid var(--rec); background: var(--rec-bg); color: var(--rec-ink); border-radius: 6px; font-size: 12px; line-height: 1.3; text-decoration: none; cursor: pointer; }
.cal-rec .h { font-weight: 600; font-size: 11.5px; margin-right: 5px; }
.cal-rec:hover { background: #FDE9B4; text-decoration: none; }
.cal-rec.vencido { background: var(--rojo-bg); color: var(--rojo); border-left-color: var(--rojo); }
.cal-dia.hoy .cal-rec { box-shadow: 0 0 0 1px #FBD38D; }
.cal-dia .rec-popover { position: absolute; z-index: 20; left: 0; top: 100%; width: 400px; max-width: min(400px, calc(100vw - 32px)); }
.cal-dia:nth-child(7n) .rec-popover, .cal-dia:nth-child(7n-1) .rec-popover { left: auto; right: 0; }
.cal-dia:nth-child(n+29) .rec-popover { top: auto; bottom: 100%; }
.cal-dia .rec-popover .rec-form { box-shadow: 0 16px 40px rgba(16,24,40,.18); }
.cal-sin-fecha .btn-rec-dia { height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line-control); background: #fff; color: var(--accent); font-size: 12px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; }

/* --- aviso dentro de la app cuando llega la hora --- */
.alerta-rec { position: fixed; right: 20px; bottom: 20px; width: 420px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--rec-borde); border-left: 5px solid var(--rec); border-radius: 12px; box-shadow: 0 16px 40px rgba(16,24,40,.22), 0 0 0 1px rgba(180,83,9,.08); padding: 12px 14px 12px 16px; z-index: 60; font-size: 13px; display: none; }
.alerta-rec.on { display: block; animation: rec-entra .25s ease-out; }
@keyframes rec-entra { from { transform: translateY(12px); opacity: 0; } }
.alerta-rec .cab { display: flex; align-items: center; gap: 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--rec-ink); font-weight: 600; margin-bottom: 6px; }
.alerta-rec .cab .cerrar { margin-left: auto; width: 28px; height: 28px; border-radius: 6px; border: 0; background: none; cursor: pointer; color: var(--ink-2); font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.alerta-rec .cab .cerrar:hover { background: #F1F3F6; color: var(--ink); }
.alerta-rec .tit { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.alerta-rec .nota-a { color: var(--ink-2); margin-top: 2px; }
.alerta-rec .acc { display: flex; gap: 6px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.alerta-rec .acc button { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
.alerta-rec .acc .grupo { display: inline-flex; align-items: center; margin-left: auto; border: 1px solid var(--line-control); border-radius: 8px; overflow: hidden; }
.alerta-rec .acc .grupo .eti { font-size: 12px; color: var(--ink-2); padding: 0 8px 0 10px; }
.alerta-rec .acc .grupo button { border: 0; border-left: 1px solid var(--line-control); border-radius: 0; height: 30px; }
.alerta-rec .mas-rec { font-size: 12px; color: var(--ink-2); margin-top: 6px; }
@media (max-width: 600px) {
  .alerta-rec { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
  .alerta-rec .acc button { height: 40px; }
  .alerta-rec .acc .pri { flex: 1 1 100%; }
  .alerta-rec .acc .grupo { margin-left: 0; }
  .alerta-rec .acc .grupo button { height: 38px; }
}

/* --- perfil: avisos, dispositivos, sonido, preferencias --- */
.avisos-rec .disp { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.avisos-rec .disp:last-child { border-bottom: 0; }
.avisos-rec .disp .ico { width: 32px; height: 32px; border-radius: 8px; background: var(--ground); display: flex; align-items: center; justify-content: center; flex: none; }
.avisos-rec .disp .q { flex: 1; min-width: 0; }
.avisos-rec .disp .q small { display: block; color: var(--ink-2); margin-top: 1px; }
.avisos-rec .disp .ok { color: var(--verde); font-weight: 600; font-size: 12px; background: var(--verde-bg); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.avisos-rec .disp .quitar-d { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 16px; width: 28px; height: 28px; border-radius: 50%; }
.avisos-rec .disp .quitar-d:hover { color: var(--rojo); background: var(--rojo-bg); }
.avisos-rec .activar { height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; border-radius: 8px; background: var(--accent); color: #fff; border: 0; cursor: pointer; font-family: inherit; }
.avisos-rec .activar:disabled { background: #94a3b8; cursor: not-allowed; }
.avisos-rec .activar.hecho:disabled { background: var(--verde); cursor: default; }
.avisos-rec .estado-push { font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.interruptor { width: 44px; height: 24px; flex: none; position: relative; border: 0; padding: 0; cursor: pointer; border-radius: 999px; background: var(--verde); }
.interruptor::after { content: ""; position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.interruptor::before { content: ""; position: absolute; inset: -8px; }
.interruptor.off { background: #94A3B8; }
.interruptor.off::after { right: auto; left: 2px; }
.interruptor:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sonido-bloque { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.sonido-bloque .cab-s { display: flex; align-items: center; gap: 12px; }
.sonido-bloque .cab-s .q { flex: 1; font-size: 13px; }
.sonido-bloque .cab-s .q small { display: block; color: var(--ink-2); }
.tonos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; margin-top: 10px; }
.tono { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 4px 0 10px; border: 1px solid var(--line-control); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 500; position: relative; }
.tono label { display: flex; flex-direction: row; align-items: center; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; gap: 8px; flex: 1; height: 100%; cursor: pointer; margin: 0; font-size: 13px; font-weight: 500; color: var(--ink); }
.tono input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tono .marca { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-control); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; flex: none; background: #fff; }
.tono label small { color: var(--ink-2); font-weight: 400; margin-left: 4px; }
.tono:has(input:checked) { background: var(--accent-soft); border: 2px solid var(--accent); padding: 0 3px 0 9px; }
.tono:has(input:checked) label { color: var(--accent); font-weight: 600; }
.tono:has(input:checked) .marca { background: var(--accent); border-color: var(--accent); color: #fff; }
.tono:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tono .oir { width: 32px; height: 32px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--accent); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.tono .oir:hover, .tono .oir:focus-visible { background: var(--accent); color: #fff; }
.tono.silencio .oir { visibility: hidden; }
.sonido-bloque.apagado .tonos { opacity: .45; pointer-events: none; }
.prefs-rec .disp .q b { font-weight: 600; }

/* --- celular --- */
@media (max-width: 800px) {
  .cal-layout { display: flex; flex-direction: column; gap: 14px; }
  .cal-layout > .lado { order: -1; }
  .cal-dia:has(.cal-rec) { display: flex; }
  .cal-filtro { flex-basis: 100%; margin-left: 0; display: flex; }
  .cal-filtro button { flex: 1; justify-content: center; padding: 0 8px; font-size: 12.5px; white-space: nowrap; height: 38px; }
  .cal-sin-fecha .btn-rec-dia { height: 40px; padding: 0 14px; }
  .cal-nav .nota { flex-basis: 100%; }
  .cal-dia .mas-dia { width: 36px; height: 36px; top: 6px; right: 8px; opacity: 1; }   /* siempre visible y sin montarse sobre la primera tarea */
  .cal-num { padding-right: 52px; line-height: 30px; }
  .cal-rec, .cal-tarea { padding: 8px; }
  .cal-dia .rec-popover, .cal-dia:nth-child(n) .rec-popover { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-width: none; z-index: 70; }
  .rec-item .acc button, .rec-lista .fila-r .x, .rec-item .acc [data-quitar] { height: 32px; min-width: 32px; }
  .rec-form .atajos button { height: 36px; }
  .rec-form input, .rec-form select { font-size: 16px; }
  .rec-form .pie { flex-wrap: wrap; }
  .rec-form .pie .btn-rec { flex: 1 1 auto; height: 40px; }
  .avisos-rec .disp { flex-wrap: wrap; }
  .tonos { grid-template-columns: 1fr 1fr; }
  .tono label small { display: none; }
}
@media print { .topbar .campana, .campana-panel, .alerta-rec, .cal-dia .mas-dia, .cal-filtro, .btn-nuevo-rec, .rec-lista .fila-r .x, .rec-form, .btn-rec-dia, .rec-popover { display: none !important; } }