/* ============================================================
   PANEL PERSONAL · estilos
   Colores y tipografía en variables al principio: cambia aquí el aspecto.
   ============================================================ */

:root {
  --fuente: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', system-ui, 'Segoe UI', Roboto, sans-serif;
  --fondo: #f1f4f8;
  --barra: #e9edf2;
  --lienzo: #eef0f2;
  --punto: #d3d7dd;
  --tarjeta: #ffffff;
  --campo: #ffffff;
  --tinta: #0f1b33;
  --suave: #64748b;
  --borde: #e7ebf1;
  --chip: #e9f0fe;
  --chip-tinta: #2f6bde;
  --acento: #3b78e7;
  --acento-tinta: #ffffff;
  --anillo-fondo: #e8ecf2;
  --aviso: #e5484d;
  --t-personal: #3b6a8f;
  --t-trabajo: #d98a2b;
  --t-proyecto: #3f9d6a;
  --t-recordatorio: #8f63c9;
  --t-tarea: #7b8794;
  --sombra: 0 1px 2px rgba(16, 32, 64, .035), 0 6px 18px rgba(16, 32, 64, .04);
  --sombra-alta: 0 2px 4px rgba(16, 32, 64, .05), 0 12px 26px rgba(16, 32, 64, .08);
  --area-abajo: env(safe-area-inset-bottom, 0px);
  --area-arriba: env(safe-area-inset-top, 0px);
  --verde: #17a673;
  --verde-fondo: #e1f6ee;
  --naranja: #e08a00;
  --naranja-fondo: #fff1d9;
  --morado: #7c4dde;
  --morado-fondo: #efe8fd;
  color-scheme: light;
}
:root[data-tema='oscuro'] {
  --fondo: #0f1319;
  --barra: #212833;
  --lienzo: #0f1217;
  --punto: #232932;
  --tarjeta: #171c24;
  --campo: #1f2630;
  --tinta: #e8ecf2;
  --suave: #8f99a8;
  --borde: #262d38;
  --chip: #1f2d47;
  --chip-tinta: #8fb6fa;
  --acento: #6aa1f7;
  --acento-tinta: #0b1730;
  --anillo-fondo: #2b333d;
  --aviso: #ff7a7f;
  --t-personal: #6aa3d1;
  --t-trabajo: #f0a94f;
  --t-proyecto: #5fc48c;
  --t-recordatorio: #b592ee;
  --t-tarea: #9aa6b4;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --sombra-alta: 0 2px 4px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .45);
  --verde: #34c38f;
  --verde-fondo: #12342b;
  --naranja: #f5ad42;
  --naranja-fondo: #3a2b12;
  --morado: #b592ee;
  --morado-fondo: #2a2145;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.4;
  color: var(--tinta);
  background: var(--fondo);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p { margin: 0; }
button { font-family: inherit; }
[hidden] { display: none !important; }
.oculto { display: none; }
.suave { color: var(--suave); }
.aviso { color: var(--aviso); }
.centro { text-align: center; }
.empuja { margin-left: auto; }
.pequeno-txt { font-size: 12px; }
.ico { display: inline-flex; line-height: 0; flex: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.sin-scroll .vista { overflow: hidden; }

/* ---------- Botones y campos ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--borde); background: var(--tarjeta); color: var(--tinta);
  font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .05s;
}
.btn:hover { border-color: var(--suave); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.primario { background: var(--acento); color: var(--acento-tinta); border-color: transparent; }
.btn.primario:hover { filter: brightness(1.08); }
.btn.peligro { background: var(--aviso); color: #fff; border-color: transparent; }
.btn.peligro-suave { color: var(--aviso); }
.btn.icono { width: 38px; padding: 0; }
.btn.pequeno { height: 32px; padding: 0 11px; font-size: 13px; }
.btn.ancho { width: 100%; }
.btn-suave {
  display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none;
  border: 0; border-radius: 8px; background: transparent; color: var(--suave); cursor: pointer;
}
.btn-suave:hover { background: var(--barra); color: var(--tinta); }
.btn-suave[aria-pressed='true'] { color: var(--acento); }

input[type=text], input[type=number], input[type=date], input[type=time], input[type=url],
input[type=email], input[type=password], input[type=search], select, textarea {
  font: inherit; font-size: 14px; color: var(--tinta); background: var(--campo);
  border: 1px solid var(--borde); border-radius: 10px; padding: 8px 11px;
  min-height: 38px; width: 100%; min-width: 0;
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: transparent; }
input::placeholder, textarea::placeholder { color: var(--suave); opacity: .8; }
@media (pointer: coarse) {
  input[type=text], input[type=number], input[type=date], input[type=time], input[type=url],
  input[type=email], input[type=password], input[type=search], select, textarea { font-size: 16px; }
}
.casilla {
  appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; padding: 0; min-height: 0;
  border: 2px solid var(--suave); border-radius: 6px; background: transparent; cursor: pointer; position: relative;
}
.casilla:checked { background: var(--acento); border-color: var(--acento); }
.casilla:checked::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid var(--acento-tinta); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ---------- Pantallas de acceso ---------- */
.centrada { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.caja-login {
  width: min(390px, 100%); background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 20px; padding: 28px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 10px;
}
.caja-login h1 { font-size: 24px; font-weight: 700; }
.logo-login { width: 48px; height: 48px; border-radius: 14px; background: var(--chip); color: var(--chip-tinta); display: grid; place-items: center; }
.form { display: flex; flex-direction: column; margin-top: 6px; }
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.etiqueta { font-size: 12.5px; font-weight: 600; color: var(--suave); }
.error { color: var(--aviso); font-size: 13px; margin-bottom: 4px; }
.error:empty { display: none; }
.botones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.botones .izq { margin-right: auto; }

.chip { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--chip); color: var(--chip-tinta); flex: none; }
.num { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--chip); color: var(--chip-tinta); font-size: 11.5px; font-weight: 700; flex: none; }
.punto { width: 6px; height: 6px; border-radius: 50%; background: var(--chip-tinta); flex: none; margin: 0 7px; }
.mas { font-size: 12px; color: var(--suave); }
.anillo, .donut { position: relative; flex: none; }
.anillo svg, .donut svg { display: block; }
.anillo-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1.15; }
.anillo-centro strong { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.anillo-centro span { font-size: 11.5px; color: var(--suave); }
.img-vacia { display: grid; place-items: center; background: var(--chip); color: var(--chip-tinta); }
img.roto { display: none; }
.añadir { display: flex; gap: 6px; flex: none; }
.añadir input { flex: 1; }
.añadir.doble input[type=date], .añadir.doble input[type=time] { flex: none; width: 140px; }
.filas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fila { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 4px 4px; border-bottom: 1px solid var(--borde); background: var(--tarjeta); }
.filas > .fila:last-child { border-bottom: 0; }
.filas.compacta .fila { min-height: 32px; border-bottom: 0; padding: 2px 2px; font-size: 14px; }
.fila .texto { flex: 1; min-width: 0; overflow-wrap: anywhere; cursor: text; }
.fila .texto small { display: block; font-size: 12.5px; }
.fila-btn { background: none; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
.tachado { text-decoration: line-through; color: var(--suave); }
.asa { display: grid; place-items: center; width: 26px; height: 32px; color: var(--suave); cursor: grab; touch-action: none; flex: none; }
.asa-hueco { width: 6px; flex: none; }
.fila.arrastrando { position: relative; z-index: 5; box-shadow: var(--sombra-alta); border-radius: 10px; border-bottom-color: transparent; }
.ordenando .fila:not(.arrastrando) { transition: transform .15s; }
.en-linea { height: 34px; min-height: 0 !important; flex: 1; }
.vacio { color: var(--suave); font-size: 14px; margin: 10px 2px; }
.grande-vacio { text-align: center; padding: 56px 0; }
/* ---------- Página a pantalla completa ---------- */
.pagina-estrecha { max-width: 680px; margin: 0 auto; }
.pagina-ancha { max-width: 1100px; margin: 0 auto; }
.bloque { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--sombra); }
.bloque .bloque { border: 0; box-shadow: none; padding: 0; margin: 18px 0 0; background: none; }
.bloque-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.bloque-cab h3 { font-size: 15px; font-weight: 650; }
.cap::first-letter { text-transform: uppercase; }
.bloque .añadir { margin-bottom: 8px; }
.bloque .fila { background: transparent; }
.barra-herr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.segmentos { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--barra); }
.segmentos button { border: 0; background: transparent; color: var(--suave); padding: 7px 13px; border-radius: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.segmentos button.activo { background: var(--tarjeta); color: var(--tinta); box-shadow: var(--sombra); }
textarea.nota-grande { min-height: 62dvh; font-size: 16px; line-height: 1.65; padding: 18px; border-radius: 14px; background: var(--tarjeta); }
.pie-nota { margin-top: 8px; text-align: right; font-size: 13px; }

/* ---------- Ventanas ---------- */
.modal-fondo { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 12, 18, .5); animation: aparecer .15s ease; }
@keyframes aparecer { from { opacity: 0; } }
.modal { width: min(470px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--tarjeta); border-radius: 18px; padding: 22px; box-shadow: var(--sombra-alta); animation: subir .2s ease; }
.modal.ancha { width: min(920px, 100%); }
@keyframes subir { from { transform: translateY(16px); opacity: 0; } }
.modal-titulo { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.confirmar h3 { font-size: 17px; margin-bottom: 8px; }
.confirmar .botones { margin-top: 18px; }
.colores { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 2px; }
.color { width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer; }
.color.activo { outline: 3px solid var(--tinta); outline-offset: 2px; }
.campo-imagen { display: flex; gap: 14px; align-items: flex-start; }
.img-prev { width: 104px; height: 104px; flex: none; border-radius: 12px; overflow: hidden; background: var(--chip); color: var(--chip-tinta); display: grid; place-items: center; }
.img-prev img, .img-prev .img-vacia { width: 100%; height: 100%; object-fit: cover; }
.campo-imagen-ctl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.campo-imagen-ctl input { width: 100%; }
.visor-img { display: block; max-width: 100%; max-height: 68dvh; margin: 0 auto; border-radius: 12px; background: var(--chip); }
.visor .botones { margin-top: 14px; justify-content: center; }
#toast { position: fixed; z-index: 200; left: 50%; bottom: calc(24px + var(--area-abajo)); transform: translate(-50%, 20px); max-width: calc(100% - 32px); padding: 11px 18px; border-radius: 12px; background: var(--tinta); color: var(--fondo); font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: .25s; }
#toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Presupuesto ---------- */
.selector-mes { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.selector-mes h2 { font-size: 22px; font-weight: 700; text-transform: capitalize; min-width: 170px; text-align: center; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; align-items: end; }
.cifras > div, .cifra-editable { display: flex; flex-direction: column; gap: 4px; }
.grande { font-size: 28px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.entrada-euro { display: flex; align-items: center; gap: 6px; }
.entrada-euro input { max-width: 130px; font-size: 18px; font-weight: 650; }
.entrada-euro i { font-style: normal; font-weight: 650; }
.progreso { height: 10px; border-radius: 99px; background: var(--anillo-fondo); margin-top: 16px; overflow: hidden; }
.progreso-relleno { height: 100%; border-radius: 99px; background: var(--acento); transition: width .3s; }
.progreso-relleno.aviso { background: var(--aviso); }
.gasto-form { display: grid; grid-template-columns: 2fr 1fr 1.3fr 1.1fr auto; gap: 8px; }
.desglose { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.donut .anillo-centro strong { font-size: 18px; }
.leyenda { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 240px; }
.leyenda li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--borde); }
.leyenda li:last-child { border-bottom: 0; }
.leyenda .texto { flex: 1; }
.muestra { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; }
.importe, .leyenda strong { font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-cat { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px; border: 1px solid var(--borde); background: var(--tarjeta); color: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.chip-cat .ico { color: var(--suave); }

/* ---------- Calendario ---------- */
.rejilla-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 18px; }
.cab-dia { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--suave); padding: 4px 0; }
.dia { min-height: 92px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 6px; text-align: left; font: inherit; color: inherit; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; cursor: pointer; overflow: hidden; }
.dia:hover { border-color: var(--suave); }
.dia.vacio-dia { visibility: hidden; }
.dia.sel { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.num-dia { align-self: flex-start; font-size: 13px; font-weight: 650; min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.dia.hoy .num-dia { background: var(--acento); color: var(--acento-tinta); }
.marcas { display: none; gap: 3px; justify-content: center; }
.marca { width: 6px; height: 6px; border-radius: 50%; background: var(--acento); }
.titulos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cita-mini { font-size: 11.5px; font-weight: 550; padding: 1px 5px; border-radius: 5px; background: var(--chip); color: var(--chip-tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cita-mini.mas { background: none; color: var(--suave); }
.hora { width: 92px; flex: none; font-size: 13px; font-weight: 600; color: var(--acento); text-transform: capitalize; }

/* ---------- Compras (moodboard) ---------- */
.moodboard { columns: 4 230px; column-gap: 14px; }
.mood { break-inside: avoid; margin-bottom: 14px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; box-shadow: var(--sombra); }
.mood.comprado img { opacity: .5; filter: grayscale(.7); }
.mood-img { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--chip); cursor: pointer; }
.mood-img img { display: block; width: 100%; height: auto; }
.mood-img .img-vacia { aspect-ratio: 4 / 3; }
.mood-enlace { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }
.mood-pie { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; padding: 9px 8px 8px 13px; }
.mood-datos { display: flex; flex-direction: column; min-width: 0; padding-top: 3px; }
.mood-datos strong { font-size: 14.5px; overflow-wrap: anywhere; }
.mood-acciones { display: flex; flex: none; }

/* ---------- Proyectos ---------- */
.proyectos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.proy { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; background: var(--tarjeta); color: inherit; font: inherit; cursor: pointer; box-shadow: var(--sombra); transition: box-shadow .2s, transform .2s; }
.proy:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); }
.proy-img { aspect-ratio: 4 / 3; background: var(--chip); }
.proy-img img, .proy-img .img-vacia { width: 100%; height: 100%; object-fit: cover; display: block; }
.proy-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; }
.proy-pie strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estado { flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: var(--barra); color: var(--suave); }
.estado.e-en_curso { background: color-mix(in srgb, var(--acento) 18%, transparent); color: var(--acento); }
.estado.e-terminado { background: color-mix(in srgb, #3f9d5f 20%, transparent); color: #2f8a50; }
:root[data-tema='oscuro'] .estado.e-terminado { color: #6fcf8e; }
.ficha-cab { display: flex; gap: 20px; margin-bottom: 18px; align-items: flex-start; }
.portada { position: relative; width: 240px; aspect-ratio: 4 / 3; flex: none; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--chip); cursor: pointer; }
.portada img, .portada .img-vacia { width: 100%; height: 100%; object-fit: cover; display: block; }
.portada-cambiar { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 600; }
.ficha-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.titulo-editable { font-size: 28px !important; font-weight: 700; border: 0 !important; background: transparent !important; padding: 2px 0 !important; border-radius: 6px; letter-spacing: -.01em; }
.titulo-editable:focus { outline: 2px solid var(--acento) !important; padding: 2px 8px !important; }
.ficha .campo textarea { background: var(--tarjeta); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.galeria-item { aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--chip); cursor: pointer; }
.galeria-item img, .galeria-item .img-vacia { width: 100%; height: 100%; object-fit: cover; display: block; }
.zona-peligro { margin-top: 28px; text-align: right; }


/* ---------- Agenda (calendario) ---------- */
.marca.t-personal, .cita-mini.t-personal { --c: var(--t-personal); }
.t-personal { --c: var(--t-personal); }
.t-trabajo { --c: var(--t-trabajo); }
.t-proyecto { --c: var(--t-proyecto); }
.t-recordatorio { --c: var(--t-recordatorio); }
.t-tarea { --c: var(--t-tarea); }
.marca { background: var(--c, var(--acento)); }
.cita-mini { background: color-mix(in srgb, var(--c, var(--acento)) 18%, transparent); color: color-mix(in srgb, var(--c, var(--acento)) 75%, var(--tinta)); }
.cita-mini.mas { background: none; }
.fila.ev .marca { width: 9px; height: 9px; flex: none; }
.fila.ev { border-left: 0; }
.campana { display: inline-flex; margin-left: 6px; color: var(--t-recordatorio); vertical-align: -2px; }
.leyenda-tipos { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -4px 0 14px; font-size: 12.5px; color: var(--suave); }
.leyenda-tipos span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda-tipos .marca { background: var(--c); }
.bloque.destacado { border-color: color-mix(in srgb, var(--t-recordatorio) 45%, var(--borde)); }
.bloque-cab h3 .ico { vertical-align: -2px; color: var(--t-recordatorio); }
.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.dia-semana { display: flex; flex-direction: column; gap: 6px; min-height: 180px; padding: 8px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; }
.dia-semana.es-hoy { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
.dia-semana-cab { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; text-align: left; }
.nombre-dia { font-size: 12px; font-weight: 700; color: var(--suave); text-transform: uppercase; }
.dia-semana .num-dia { align-self: auto; }
.dia-semana.es-hoy .num-dia { background: var(--acento); color: var(--acento-tinta); }
.ev-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ev-mini { width: 100%; text-align: left; border: 0; border-radius: 7px; padding: 4px 7px; font: inherit; font-size: 12.5px; cursor: pointer; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--tinta); border-left: 3px solid var(--c); overflow-wrap: anywhere; }
.ev-mini b { font-weight: 700; }
.sin-ev { color: var(--suave); font-size: 13px; padding: 0 2px; }

/* ---------- Búsqueda ---------- */
.modal.paleta { width: min(620px, 100%); padding: 0; align-self: flex-start; margin-top: 9dvh; max-height: 78dvh; display: flex; flex-direction: column; overflow: hidden; }
.busca { display: flex; flex-direction: column; min-height: 0; }
.busca-cab { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--borde); color: var(--suave); }
.busca-input { border: 0 !important; background: transparent !important; font-size: 16px !important; padding: 6px 0 !important; min-height: 0 !important; outline: none !important; }
.busca-res { overflow-y: auto; padding: 6px 8px 10px; }
.busca-grupo { margin: 10px 8px 4px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); font-weight: 700; }
.busca-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.busca-item.activo { background: var(--barra); }
.busca-texto { display: flex; flex-direction: column; min-width: 0; }
.busca-texto strong { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-texto small { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-ayuda { padding: 14px 10px; }

@media (max-width: 900px) {
  .semana { grid-template-columns: 1fr; }
  .dia-semana { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .dia-semana-cab { width: 64px; flex-direction: column; align-items: flex-start; gap: 2px; }
  .ev-lista { flex: 1; min-width: 0; }
}
@media (max-width: 720px) {
  .modal.paleta { margin-top: 0; width: 100%; border-radius: 0 0 18px 18px; align-self: flex-start; max-height: 90dvh; }
  .modal-fondo:has(.paleta) { align-items: flex-start; }
}

/* ---------- Presupuesto ampliado ---------- */
.gasto-rapido:not(.compacto) { display: grid; grid-template-columns: 2fr 1fr 1.3fr auto; gap: 8px; align-items: center; }
.gasto-fecha { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.gasto-fecha input[type=date] { width: auto; }
.progreso.fino { height: 6px; margin-top: 8px; }
.progreso.sobre { background: color-mix(in srgb, var(--aviso) 22%, var(--anillo-fondo)); }
.cat-fila { display: block; padding: 7px 0; }
.cat-linea { display: flex; align-items: center; gap: 10px; }
.cat-linea .texto { flex: 1; min-width: 0; }
.rec-marca { margin-left: 6px; color: var(--acento); font-weight: 700; }
.fila.inactivo { opacity: .55; }
.margen-sup { margin-top: 10px; }
.chip-cat small { font-size: 11.5px; }
.grafica { width: 100%; height: auto; max-height: 250px; display: block; }
.grafica text { font-family: var(--fuente); fill: var(--suave); }
.grafica-eje { stroke: var(--borde); stroke-width: 1; }
.grafica-limite { stroke: var(--suave); stroke-width: 1; stroke-dasharray: 5 5; opacity: .7; }
.grafica .grafica-limite-txt { font-size: 11px; }
.grafica .barra-valor { font-size: 12.5px; font-weight: 700; fill: var(--tinta); }
.grafica .barra-mes-nombre { font-size: 12.5px; text-transform: capitalize; }

/* ---------- Proyectos ampliados ---------- */
.segmentos.deslizable { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmentos.deslizable::-webkit-scrollbar { display: none; }
.segmentos.deslizable button { white-space: nowrap; }
.proy-img { position: relative; }
.proy-pct { position: absolute; right: 8px; top: 8px; padding: 3px 9px; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 700; }
.proy-pie { flex-direction: column; align-items: stretch; gap: 0; }
.proy-linea { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.proy-meta { font-size: 12.5px; margin-top: 8px; }
.proy-aviso { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.proy-aviso span { font-size: 11.5px; font-weight: 650; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--aviso) 16%, transparent); color: var(--aviso); }
.destacado-aviso { border-color: color-mix(in srgb, var(--aviso) 40%, var(--borde)); }
.bloque-cab h3 .ico { vertical-align: -2px; }
.estado.e-por_empezar { background: var(--barra); color: var(--suave); }
.estado.e-en_pausa { background: color-mix(in srgb, var(--t-trabajo) 20%, transparent); color: var(--t-trabajo); }
.estado.e-completado { background: color-mix(in srgb, #3f9d5f 20%, transparent); color: #2f8a50; }
:root[data-tema='oscuro'] .estado.e-completado { color: #6fcf8e; }
.mini-progreso { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--acento); border-radius: 0 3px 3px 0; }
.portada-mini span { padding-bottom: 9px; }
.pestañas { display: flex; gap: 2px; margin: 0 0 16px; border-bottom: 1px solid var(--borde); overflow-x: auto; scrollbar-width: none; }
.pestañas::-webkit-scrollbar { display: none; }
.pestañas button { position: relative; flex: none; padding: 11px 16px; border: 0; background: none; color: var(--suave); font: inherit; font-weight: 650; font-size: 14.5px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestañas button:hover { color: var(--tinta); }
.pestañas button.activa { color: var(--acento); border-bottom-color: var(--acento); }
.contador { margin-left: 7px; padding: 1px 7px; border-radius: 99px; background: var(--barra); color: var(--suave); font-size: 11.5px; font-weight: 700; }
.datos-proy { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.dato { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; }
.dato-btn { cursor: pointer; }
.dato-btn:hover { border-color: var(--suave); }
.rango { width: 100%; padding: 0; min-height: 0; accent-color: var(--acento); }
.citas-proy { margin-top: 10px; }
.zona-peligro { margin-top: 28px; text-align: right; }
.ficha .campo textarea { background: var(--tarjeta); }

/* ---------- Adaptación a móvil ---------- */
@media (max-width: 720px) {
  .bloque { padding: 14px; }
  .modal-fondo { align-items: flex-end; padding: 0; }
  .modal { width: 100%; border-radius: 20px 20px 0 0; max-height: 92dvh; padding: 20px 18px calc(20px + var(--area-abajo)); }
  .gasto-rapido:not(.compacto) { grid-template-columns: 1fr 1fr; }
  .gasto-rapido:not(.compacto) .btn { grid-column: 1 / -1; }
  .gasto-rapido:not(.compacto) input[list] { grid-column: 1 / -1; }
  .selector-mes h2 { min-width: 0; flex: 1; font-size: 19px; }
  .rejilla-mes { gap: 3px; }
  .dia { min-height: 54px; padding: 4px; align-items: center; }
  .num-dia { align-self: center; }
  .marcas { display: flex; }
  .titulos { display: none; }
  .moodboard { columns: 2 140px; column-gap: 10px; }
  .mood { margin-bottom: 10px; }
  .proyectos-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ficha-cab { flex-direction: column; }
  .portada { width: 100%; aspect-ratio: 16 / 9; }
  .campo-imagen { flex-direction: column; }
  .añadir.doble { flex-wrap: wrap; }
  .añadir.doble input[type=text] { flex-basis: 100%; }
  .añadir.doble input[type=date] { flex: 1; }
  .hora { width: 74px; }
}


/* ============================================================
   ESTRUCTURA: pantalla completa, cabecera y vista
   ============================================================ */
.app { display: flex; height: 100dvh; overflow: hidden; background: var(--fondo); }
.punto-color { display: inline-block; width: 12px; height: 12px; margin: 0 3px; border-radius: 50%; flex: none; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.buscador {
  flex: 1; min-width: 0; max-width: 580px; margin: 0 auto; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 18px;
  border: 1px solid var(--borde); border-radius: 99px; background: var(--tarjeta); color: var(--suave); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  box-shadow: var(--sombra);
}
.buscador:hover { border-color: var(--suave); }
.buscador span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buscador kbd, .buscar kbd { font: inherit; font-size: 11.5px; padding: 1px 7px; border: 1px solid var(--borde); border-radius: 6px; }
.cab-acciones { display: flex; align-items: center; gap: 10px; flex: none; }
.conmutador-tema { display: inline-flex; padding: 3px; border: 0; border-radius: 99px; background: var(--barra); cursor: pointer; }
.conmutador-tema span { display: grid; place-items: center; width: 32px; height: 28px; border-radius: 99px; color: var(--suave); }
.conmutador-tema span.on { background: var(--tarjeta); color: var(--tinta); box-shadow: var(--sombra); }
.btn-icono-cab { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--tinta); cursor: pointer; }
.btn-icono-cab:hover { background: var(--barra); }
.campana { position: relative; }
.campana-n { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--aviso); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.avisos { position: absolute; right: 0; top: 48px; z-index: 60; width: min(370px, 92vw); padding: 14px; border: 1px solid var(--borde); border-radius: 16px; background: var(--tarjeta); box-shadow: var(--sombra-alta); }
.avisos h4 { margin: 0 0 8px; font-size: 14px; }
.avisos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 60dvh; overflow-y: auto; }
.aviso-item { display: flex; gap: 11px; width: 100%; padding: 9px 8px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.aviso-item:hover { background: var(--barra); }
.aviso-item span { display: flex; flex-direction: column; min-width: 0; }
.aviso-item strong { font-size: 14px; font-weight: 600; }
.aviso-item small { font-size: 12.5px; }
.aviso-punto { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; flex: none; background: var(--suave); }
.aviso-punto.a-rojo { background: var(--aviso); }
.aviso-punto.a-naranja { background: var(--naranja); }
.aviso-punto.a-azul { background: var(--acento); }
.aviso-punto.a-morado { background: var(--t-recordatorio); }
.avatar { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--chip); color: var(--chip-tinta); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }

.vista { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 22px calc(48px + var(--area-abajo)); outline: none; -webkit-overflow-scrolling: touch; }
.vista-int { max-width: 1100px; margin: 0 auto; }
.vista-cab { display: flex; align-items: center; gap: 14px; margin: 8px 0 22px; }
.vista-cab h1 { font-size: 27px; font-weight: 750; letter-spacing: -.015em; }
.vista-cab p { font-size: 14px; }
.chip.grande { width: 46px; height: 46px; border-radius: 14px; }
.solo-movil { display: none; }
.volver-lista { margin-bottom: 14px; }
.izq-botones { justify-content: flex-start; }
.enlace { border: 0; background: none; color: var(--acento); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 2px; }

/* ============================================================
   INICIO
   ============================================================ */
.inicio { max-width: 2200px; margin: 0 auto; }
.punto-estado { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.punto-estado.rojo { background: var(--aviso); }
.punto-estado.verde { background: var(--verde); }
.punto-estado.azul { background: var(--acento); }
.punto-estado.gris { background: var(--suave); opacity: .6; }
.barra-fina { display: block; height: 6px; border-radius: 99px; background: var(--anillo-fondo); overflow: hidden; }
.barra-fina i { display: block; height: 100%; border-radius: 99px; background: var(--acento); }
.barra-fina i.sobre { background: var(--aviso) !important; }

.panel-i { display: flex; flex-direction: column; min-width: 0; padding: 20px 22px; border: 1px solid var(--borde); border-radius: 18px; background: var(--tarjeta); box-shadow: var(--sombra); }
.panel-i-cab { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.panel-i-cab h3 { font-size: 16px; font-weight: 700; white-space: nowrap; }
.panel-i-ico { display: grid; color: var(--suave); }
.panel-i-titulo2 { display: flex; flex-direction: column; line-height: 1.25; }
.panel-i-titulo2 small { font-size: 12px; }
.panel-i-enlace { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--acento); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.panel-i-pie { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; font-size: 13px; }
.panel-i-pie .panel-i-enlace { margin-left: 0; }
.pildoras { margin-left: auto; max-width: 100%; overflow-x: auto; scrollbar-width: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; background: var(--barra); }
.pildoras button { border: 0; background: transparent; padding: 5px 12px; border-radius: 99px; color: var(--suave); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pildoras button.activa { background: var(--tarjeta); color: var(--tinta); box-shadow: var(--sombra); }
.dia-lista { list-style: none; margin: 0; padding: 0; }
.dia-fila { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--borde); }
.dia-fila:last-child { border-bottom: 0; }
.dia-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; color: inherit; font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; padding: 0; }
.dia-fecha { min-width: 56px; text-align: right; font-size: 13px; color: var(--suave); white-space: nowrap; }
.dia-fecha.rojo { color: var(--aviso); font-weight: 650; }
.casilla.redonda { width: 20px; height: 20px; border-radius: 50%; }
.casilla.redonda::after { left: 6px; top: 2px; }
.casilla.u-rojo { border-color: var(--aviso); }
.casilla.u-naranja { border-color: var(--naranja); }
.casilla.u-gris { border-color: var(--suave); opacity: .7; }
.casilla.redonda:checked { opacity: 1; }
.reloj { display: grid; place-items: center; width: 20px; color: var(--acento); }
.reloj.morado { color: var(--t-recordatorio); }
.chip-origen { padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; background: color-mix(in srgb, var(--c, var(--acento)) 14%, transparent); color: color-mix(in srgb, var(--c, var(--acento)) 82%, var(--tinta)); }
.chip-origen.neutro { background: var(--barra); color: var(--suave); }
.ev-i-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ev-i { display: flex; align-items: center; gap: 14px; width: 100%; padding: 9px 6px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ev-i:hover { background: var(--barra); }
.ev-i-fecha { display: flex; flex-direction: column; align-items: center; width: 40px; line-height: 1.1; }
.ev-i-fecha small { font-size: 12px; color: var(--suave); text-transform: capitalize; }
.ev-i-fecha strong { font-size: 22px; font-weight: 700; }
.ev-i-barra { width: 4px; height: 40px; border-radius: 99px; background: var(--c, var(--acento)); }
.ev-i-texto { display: flex; flex-direction: column; min-width: 0; }
.ev-i-texto strong { font-size: 14.5px; font-weight: 650; }
.ev-i-texto small { font-size: 12.5px; }
.presu-i { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0; }
.presu-i .anillo svg { width: 100%; height: 100%; }
.presu-i .anillo-centro span { font-size: 13px; }
.presu-i-linea { font-size: 15px; font-weight: 650; text-align: center; }
.presu-i-datos { flex: 1; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.presu-i-datos div { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.presu-i-datos dt { display: flex; align-items: center; gap: 8px; color: var(--suave); }
.presu-i-datos dd { margin: 0; font-weight: 650; }
.subtitulo-i { margin: 18px 0 10px; font-size: 13.5px; font-weight: 650; }
.cat-i { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cat-i-linea { display: flex; gap: 10px; margin-bottom: 5px; font-size: 13px; }
.cat-i-linea span:first-child { flex: 1; font-weight: 550; }
.proy-i-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.proy-i { display: flex; flex-direction: column; gap: 7px; padding: 0 0 13px; border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; background: var(--tarjeta); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.proy-i:hover { box-shadow: var(--sombra-alta); }
.proy-i > :not(.proy-i-img) { margin: 0 13px; }
.proy-i-img { display: block; aspect-ratio: 16 / 10; background: var(--chip); }
.proy-i-img img, .proy-i-img .img-vacia { width: 100%; height: 100%; object-fit: cover; display: block; }
.proy-i strong { font-size: 14.5px; margin-top: 3px; }
.estado-linea { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.estado-linea i { width: 7px; height: 7px; border-radius: 50%; background: var(--suave); }
.estado-linea.e-en_curso { color: var(--acento); } .estado-linea.e-en_curso i { background: var(--acento); }
.estado-linea.e-completado { color: var(--verde); } .estado-linea.e-completado i { background: var(--verde); }
.estado-linea.e-en_pausa { color: var(--naranja); } .estado-linea.e-en_pausa i { background: var(--naranja); }
.proy-i-meta, .proy-i-euros { font-size: 12px; }
.proy-i-euros { display: flex; justify-content: space-between; gap: 6px; }
.compra-i-lista, .nota-i-lista { list-style: none; margin: 0; padding: 0; }
.compra-i { display: flex; align-items: center; gap: 13px; width: 100%; padding: 10px 0; border: 0; border-bottom: 1px solid var(--borde); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.compra-i-lista li:last-child .compra-i { border-bottom: 0; }
.compra-i-img { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; flex: none; background: var(--chip); }
.compra-i-img img, .compra-i-img .img-vacia { width: 100%; height: 100%; object-fit: cover; display: block; }
.compra-i-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.compra-i-texto strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compra-i-der { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 13px; }
.prioridad { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--suave); }
.prioridad i { width: 7px; height: 7px; border-radius: 50%; background: var(--suave); }
.prioridad.p-alta i { background: var(--aviso); }
.prioridad.p-media i { background: var(--naranja); }
.estado-linea.ec-por_comprar { color: var(--naranja); } .estado-linea.ec-por_comprar i { background: var(--naranja); }
.estado-linea.ec-comparando { color: var(--acento); } .estado-linea.ec-comparando i { background: var(--acento); }
.nota-i { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--borde); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nota-i-lista li:last-child .nota-i { border-bottom: 0; }
.nota-i-cab { display: flex; justify-content: space-between; gap: 8px; }
.nota-i-cab strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nota-i-texto { font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.obj-i { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.obj-i button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 4px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; font-size: 14.5px; text-align: left; cursor: pointer; }
.obj-i button:hover, .emp-i button:hover { background: var(--barra); }
.emp-i { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.emp-i button { display: flex; align-items: center; gap: 13px; width: 100%; padding: 11px 10px; border: 1px solid var(--borde); border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.emp-i-texto { flex: 1; display: flex; flex-direction: column; }
.emp-i-texto small { font-size: 12.5px; }
.rapido.verde { background: var(--verde-fondo); color: var(--verde); }
.rapido.azul { background: var(--chip); color: var(--chip-tinta); }
.rapido.morado { background: var(--morado-fondo); color: var(--morado); }
.rapido.naranja { background: var(--naranja-fondo); color: var(--naranja); }
.rapido.neutro { background: var(--barra); color: var(--tinta); }

/* ============================================================
   NOTAS (varias) y COMPRAS (estados)
   ============================================================ */
.notas-vista { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; max-width: 1100px; }
.nota-panel { display: flex; flex-direction: column; padding: 12px; border: 1px solid var(--borde); border-radius: 16px; background: var(--tarjeta); max-height: calc(100dvh - 190px); }
.nota-panel-cab { display: flex; gap: 8px; }
.nota-filtros { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.nota-lista { list-style: none; margin: 10px 0 0; padding: 0; overflow-y: auto; }
.nota-item { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nota-item:hover { background: var(--barra); }
.nota-item.sel { background: var(--chip); }
.nota-item-cab { display: flex; align-items: center; gap: 6px; }
.nota-item-cab strong { flex: 1; min-width: 0; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nota-item-cab small { flex: none; font-size: 12px; }
.pin { display: inline-flex; color: var(--acento); }
.nota-previa { font-size: 13px; color: var(--suave); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nota-meta { display: flex; flex-wrap: wrap; gap: 4px; }
.etiqueta-nota { display: inline-flex; align-items: center; padding: 2px 9px; border: 0; border-radius: 99px; background: var(--barra); color: var(--suave); font: inherit; font-size: 11.5px; font-weight: 600; }
button.etiqueta-nota { cursor: pointer; }
.etiqueta-nota.activa { background: var(--acento); color: var(--acento-tinta); }
.etiqueta-nota.enlace-v { background: var(--chip); color: var(--chip-tinta); }
.etiqueta-nota button { margin-left: 5px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.nota-editor { display: flex; flex-direction: column; gap: 10px; min-height: 62dvh; padding: 16px 20px; border: 1px solid var(--borde); border-radius: 16px; background: var(--tarjeta); }
.nota-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.nota-vinculo { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.nota-vinculo select { width: auto; max-width: 200px; min-height: 32px; padding: 3px 8px; font-size: 13px; }
.activo-fijada { color: var(--acento); border-color: var(--acento); }
.nota-titulo { font-size: 24px !important; font-weight: 750; border: 0 !important; background: transparent !important; padding: 4px 0 !important; min-height: 0 !important; }
.nota-titulo:focus, textarea.nota-grande:focus { outline: none !important; }
.nota-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nota-etiquetas input { width: 150px; min-height: 30px; padding: 3px 11px; border-radius: 99px; font-size: 13px; }
textarea.nota-grande { flex: 1; min-height: 40dvh; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 15.5px; line-height: 1.7; resize: none; }
.vacio-editor { align-items: center; justify-content: center; }

.mood-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 13px 13px; }
.estado-compra { width: auto; min-height: 28px; padding: 2px 10px; border: 0; border-radius: 99px; font-size: 12px; font-weight: 650; cursor: pointer; background: var(--barra); color: var(--suave); }
.estado-compra.e-por_comprar { background: var(--naranja-fondo); color: var(--naranja); }
.estado-compra.e-comparando { background: var(--chip); color: var(--chip-tinta); }
.estado-compra.e-comprado, .estado-compra.e-recibido { background: var(--verde-fondo); color: var(--verde); }
.mood-pie { padding-bottom: 6px; }

/* ============================================================
   MÓVIL Y TABLET
   ============================================================ */
@media (max-width: 900px) {
  .solo-movil { display: inline-flex; }
  .cabecera { padding: calc(10px + var(--area-arriba)) 14px 8px; gap: 8px; }
  .buscador { height: 40px; padding: 0 14px; }
  .buscador kbd { display: none; }
  .conmutador-tema { display: none; }
  .vista { padding: 4px 14px calc(40px + var(--area-abajo)); }
  .vista-cab { margin-top: 2px; }
  .vista-cab h1 { font-size: 23px; }
  .notas-vista { grid-template-columns: 1fr; }
  .notas-vista.con-seleccion .nota-panel { display: none; }
  .notas-vista:not(.con-seleccion) .nota-editor { display: none; }
  .nota-panel { max-height: none; }
  .nota-editor { min-height: 70dvh; }
}
@media (max-width: 720px) {
  .tareas-i .panel-i-cab { flex-wrap: wrap; }
  .tareas-i .pildoras { margin-left: 0; width: 100%; }
  .pildoras button { flex: 1; }
  .panel-i { padding: 16px; }
  .proy-i-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proy-i-grid > :nth-child(3) { display: none; }
  .dia-fila .chip-origen { display: none; }
}

/* ---------- Inicio: columnas que se reparten el espacio según su contenido ---------- */
.rojo-n { color: var(--aviso); font-weight: 650; }
.inicio-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.col { display: contents; }
.inicio-cols .panel-i { order: var(--o, 0); }
@media (max-width: 720px) { .inicio-cols { grid-template-columns: 1fr; gap: 12px; } }

@media (min-width: 1101px) and (min-height: 700px) {
  .vista:has(.inicio) { padding: calc(14px + var(--area-arriba)) 18px 16px; overflow-y: hidden; }
  .inicio { display: flex; flex-direction: column; height: 100%; min-height: 560px; }
  .inicio-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
  .col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
  .inicio-cols .panel-i { order: 0; flex: 0 1 auto; min-height: 0; overflow: hidden; padding: 14px 16px; border-radius: 16px; }
  .inicio-cols .panel-i.crece { flex: 1 1 0; }
  .panel-i-cab { margin-bottom: 8px; }
  .panel-i-cab h3 { font-size: 15px; }
  .panel-i-pie { padding-top: 8px; }
  /* Las listas ocupan lo que necesitan y, si falta sitio, se desplazan por dentro */
  .dia-lista, .ev-i-lista, .cat-i, .compra-i-lista, .nota-i-lista, .obj-i, .emp-i, .proy-i-grid { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .panel-i.crece > .dia-lista, .panel-i.crece > .compra-i-lista, .panel-i.crece > .proy-i-grid { flex: 1 1 0; }
  .dia-fila { padding: 6px 2px; }
  .ev-i { padding: 6px 6px; }
  .ev-i-barra { height: 34px; }
  .ev-i-fecha strong { font-size: 20px; }
  .proy-i-grid { grid-auto-rows: 100%; }
  .proy-i { padding-bottom: 8px; gap: 4px; min-height: 0; }
  .proy-i-img { aspect-ratio: auto; flex: 1; min-height: 60px; }
  .proy-i strong { margin-top: 0; }
  .compra-i { padding: 7px 0; }
  .compra-i-img { width: 42px; height: 42px; }
  .nota-i { padding: 8px 0; }
  .obj-i button { padding: 6px 4px; }
  .emp-i { gap: 5px; }
  .emp-i button { padding: 7px 10px; }
  .emp-i-texto { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
}
@media (min-width: 1101px) and (min-height: 700px) and (max-height: 820px) {
  .proy-i-meta, .proy-i-euros { display: none; }
  .nota-i-texto { -webkit-line-clamp: 1; }
  .dia-fila { padding: 6px 2px; }
  .presu-i .anillo { width: 120px !important; height: 120px !important; }
  .obj-i li:nth-child(n+3) { display: none; }
  .nota-i-lista li:nth-child(n+2) { display: none; }
}

/* ---------- Acceso rápido (cabecera del Inicio) ---------- */
.rapidos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.rapido { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 12px; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: filter .15s; }
.rapido:hover { filter: brightness(.96); }
.mi-dia .panel-i-cab .panel-i-enlace { margin-left: auto; }
@media (max-width: 720px) {
  .rapidos { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
}


/* ---------- Sin barras: cabecera de las secciones y fila superior del Inicio ---------- */
.cabecera { flex: none; display: flex; align-items: center; gap: 14px; padding: calc(12px + var(--area-arriba)) 22px 10px; }
.cabecera[hidden] { display: none; }
.volver-inicio { flex: none; }
.cabecera .buscador { flex: 1; max-width: 560px; margin: 0 auto; }
.inicio-top { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto auto; align-items: center; gap: 16px; margin-bottom: 14px; }
.inicio-top .buscador { max-width: 520px; width: 100%; margin: 0 auto; }
.inicio-saludo h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; }
.inicio-saludo p { font-size: 14px; }
@media (max-width: 900px) {
  .inicio-top { grid-template-columns: 1fr auto; grid-template-areas: "saludo controles" "buscador buscador"; gap: 10px; }
  .inicio-saludo { grid-area: saludo; }
  .inicio-top .inicio-der { grid-area: controles; }
  .inicio-top .buscador { grid-area: buscador; max-width: none; }
  .inicio-saludo h1 { font-size: 22px; }
}

/* ============================================================
   REFINADO: más ligero, menos bordes, tipografía del sistema
   ============================================================ */
body { font-size: 14px; }
/* Cabecera del Inicio: saludo · buscador centrado · Crear y controles */
.inicio-top { grid-template-columns: 1fr minmax(260px, 560px) 1fr; }
.inicio-top .buscador { max-width: none; box-shadow: none; border-color: transparent; background: var(--tarjeta); }
.inicio-top .buscador:hover { border-color: var(--borde); }
.inicio-saludo h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.inicio-saludo p { font-size: 13px; }
.inicio-der { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.crear { position: relative; }
.crear-btn { height: 40px; padding: 0 16px 0 12px; border-radius: 12px; }
.menu-crear { position: absolute; right: 0; top: 46px; z-index: 60; display: flex; flex-direction: column; min-width: 200px; padding: 6px; border: 1px solid var(--borde); border-radius: 14px; background: var(--tarjeta); box-shadow: var(--sombra-alta); animation: aparecer .12s ease; }
.menu-crear button { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border: 0; border-radius: 9px; background: none; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.menu-crear button:hover { background: var(--barra); }
.menu-crear .ico { color: var(--suave); }
.conmutador-tema { background: var(--tarjeta); box-shadow: inset 0 0 0 1px var(--borde); }
.conmutador-tema span.on { background: var(--barra); box-shadow: none; }
.btn-icono-cab, .avatar { transition: background-color .15s; }

/* Tarjetas: bordes casi invisibles, sombras suaves, esquinas uniformes */
.panel-i, .inicio-cols .panel-i { border: 1px solid color-mix(in srgb, var(--borde) 55%, transparent); border-radius: 18px; box-shadow: var(--sombra); transition: box-shadow .25s ease, transform .25s ease; }
.panel-i:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.panel-i-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--barra); color: var(--suave); }
.panel-i-cab { gap: 10px; }
.panel-i-cab h3 { font-size: 15px; font-weight: 650; }
.panel-i-titulo2 small { font-size: 11.5px; }
.panel-i-enlace { font-size: 12.5px; }

/* Tareas y listas: filas ligeras, color solo cuando importa */
.dia-fila { border-bottom-color: color-mix(in srgb, var(--borde) 55%, transparent); }
.dia-titulo { font-size: 14px; }
.dia-fecha { font-size: 12px; color: var(--suave); }
.dia-fecha.hoy-n { color: var(--tinta); font-weight: 600; }
.casilla.redonda.u-gris { border-color: #c2cad7; opacity: 1; }
:root[data-tema='oscuro'] .casilla.redonda.u-gris { border-color: #4a5568; }
.casilla.redonda { transition: background-color .2s, border-color .2s; }
.chip-origen { font-size: 11.5px; font-weight: 600; background: color-mix(in srgb, var(--c, var(--acento)) 10%, transparent); color: color-mix(in srgb, var(--c, var(--acento)) 78%, var(--tinta)); }
.chip-origen.neutro { background: var(--barra); color: var(--suave); }
.dia-fila.completando { opacity: .35; transform: translateX(6px); transition: opacity .3s ease, transform .3s ease; }
.dia-fila.completando .dia-titulo { text-decoration: line-through; }

/* Presupuesto compacto: cifras + anillo pequeño + barra */
.presu-i { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0 10px; }
.presu-i-datos { flex: 1; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.presu-i-datos div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; }
.presu-i-datos dt { color: var(--suave); }
.presu-i-datos dd { margin: 0; font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.presu-i .anillo { width: 100px !important; height: 100px !important; flex: none; }
.presu-i .anillo-centro strong { font-size: 19px; }
.presu-barra { height: 6px; margin-bottom: 4px; border-radius: 99px; background: var(--anillo-fondo); overflow: hidden; }
.presu-barra i { display: block; height: 100%; border-radius: 99px; background: var(--acento); transition: width .5s ease; }
.presu-barra i.sobre { background: var(--aviso); }
.rojo-n { color: var(--aviso); font-weight: 650; }

/* Proyectos: tarjetas iguales, imagen arriba, nombre completo, estado y progreso */
.img-vacia { background: var(--barra); color: var(--suave); }
.proy-i { border-color: color-mix(in srgb, var(--borde) 60%, transparent); border-radius: 14px; }
.proy-i-nombre { font-size: 13.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proy-i-prog { display: flex; align-items: center; gap: 8px; }
.proy-i-prog .barra-fina { flex: 1; }
.proy-i-prog small { font-size: 11px; font-weight: 600; color: var(--suave); font-variant-numeric: tabular-nums; }
.proy-i-meta { font-size: 11.5px; }
.barra-fina i, .progreso-relleno { transition: width .45s ease; }

/* Compras y notas: más espacio para el texto */
.compra-i { padding: 9px 0; }
.compra-i-img { width: 38px; height: 38px; border-radius: 10px; }
.compra-i-texto strong, .nota-i-cab strong { font-size: 14px; }
.nota-i { border-bottom-color: color-mix(in srgb, var(--borde) 55%, transparent); }
.nota-i-texto { -webkit-line-clamp: 1; font-size: 12.5px; }
.estado-linea.ec-comprado, .estado-linea.ec-recibido { color: var(--verde); }
.estado-linea.ec-comprado i, .estado-linea.ec-recibido i { background: var(--verde); }

/* Cambio gradual de claro a oscuro */
.cambiando-tema *, .cambiando-tema *::before, .cambiando-tema *::after { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important; }

@media (min-width: 1101px) and (min-height: 700px) {
  .inicio-cols .panel-i { padding: 14px 16px; }
  .compra-i-img { width: 36px; height: 36px; }
}
@media (min-width: 1101px) and (min-height: 700px) and (max-height: 820px) {
  .presu-i .anillo { width: 84px !important; height: 84px !important; }
  .presu-i .anillo-centro strong { font-size: 16px; }
}

/* ============================================================
   MOODBOARD (pizarra del proyecto)
   ============================================================ */
.pagina-ancha.sin-limite { max-width: none; }
.vista-int:has(.sin-limite) { max-width: none; }
.mb-caja { position: relative; display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--borde) 70%, transparent); border-radius: 18px; background: var(--tarjeta); box-shadow: var(--sombra); overflow: hidden; }
.mb-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--borde) 60%, transparent); }
.mb-zoom-ctl { display: flex; align-items: center; gap: 2px; }
.mb-zoom { min-width: 48px; text-align: center; font-size: 12.5px; color: var(--suave); font-variant-numeric: tabular-nums; }
.mb-lienzo {
  position: relative; height: clamp(480px, calc(100dvh - 330px), 1000px); overflow: hidden; touch-action: none; cursor: grab; outline: none; user-select: none; -webkit-user-select: none;
  background-color: color-mix(in srgb, var(--fondo) 70%, var(--tarjeta));
  background-image: radial-gradient(var(--punto) 1.2px, transparent 1.3px); background-size: 20px 20px;
}
.mb-lienzo.agarrado { cursor: grabbing; }
.mb-lienzo.soltando { box-shadow: inset 0 0 0 3px var(--acento); }
.mb-mundo { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; --inv: 1; }
.mb-vacio { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 80%; text-align: center; pointer-events: none; color: var(--suave); }
.mb-vacio[hidden] { display: none; }
.mb-vacio strong { color: var(--tinta); font-size: 16px; }
.mb-ayuda { margin: 0; padding: 8px 14px; font-size: 12px; border-top: 1px solid color-mix(in srgb, var(--borde) 60%, transparent); }

.mb-pieza { position: absolute; border-radius: 10px; background: var(--tarjeta); box-shadow: 0 1px 3px rgba(16, 32, 64, .12), 0 6px 18px rgba(16, 32, 64, .1); cursor: grab; transition: opacity .2s ease, box-shadow .2s ease; }
.mb-pieza:hover { box-shadow: 0 2px 6px rgba(16, 32, 64, .14), 0 10px 24px rgba(16, 32, 64, .14); }
.mb-pieza .mb-img, .mb-pieza img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; pointer-events: none; -webkit-user-drag: none; }
.mb-pieza .img-vacia { border-radius: 10px; }
.mb-pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 8px; border-radius: 0 0 10px 10px; color: #fff; font-size: 12.5px; font-weight: 600; background: linear-gradient(transparent, rgba(0, 0, 0, .62)); pointer-events: none; }
.mb-pieza.sel { outline: 2px solid var(--acento); outline-offset: 3px; }
.mb-pieza.elegida { box-shadow: 0 0 0 3px var(--verde), 0 6px 18px rgba(16, 32, 64, .12); }
.mb-check { position: absolute; top: -9px; right: -9px; display: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--verde); color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transform: scale(var(--inv)); transform-origin: center; pointer-events: none; }
.mb-pieza.elegida .mb-check { display: grid; }
.mb-asa { position: absolute; right: -8px; bottom: -8px; display: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--acento); cursor: nwse-resize; transform: scale(var(--inv)); transform-origin: center; touch-action: none; }
.mb-pieza.sel .mb-asa { display: block; }
.mb-barra { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 5; display: flex; gap: 2px; padding: 4px; border: 1px solid var(--borde); border-radius: 11px; background: var(--tarjeta); box-shadow: var(--sombra-alta); transform: scale(var(--inv)); transform-origin: left bottom; white-space: nowrap; cursor: default; }
.mb-barra.abajo { bottom: auto; top: calc(100% + 14px); transform-origin: left top; }
.mb-barra button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 9px; border: 0; border-radius: 8px; background: none; color: var(--tinta); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.mb-barra button:hover { background: var(--barra); }
.mb-barra button.on { background: var(--verde-fondo); color: var(--verde); }
.mb-barra button.peligro { color: var(--aviso); }
.mb-texto { background: #fff1a8; color: #3b3200; padding: 0; }
.mb-agarre { height: 18px; border-radius: 8px 8px 0 0; background: rgba(0, 0, 0, .06); cursor: grab; }
.mb-nota { display: block; width: 100%; height: calc(100% - 18px); padding: 8px 10px 10px; border: 0 !important; background: transparent !important; color: inherit; font: inherit; font-size: 14px; line-height: 1.45; resize: none; outline: none !important; cursor: text; min-height: 0 !important; }
.mb-nota::placeholder { color: rgba(59, 50, 0, .5); }
.mb-solo-elegidas .mb-pieza:not(.elegida) { opacity: .22; }
.mb-full { position: fixed; inset: 0; z-index: 90; border-radius: 0; border: 0; }
.mb-full .mb-lienzo { height: auto; flex: 1; min-height: 0; }
@media (max-width: 720px) { .mb-lienzo { height: clamp(420px, calc(100dvh - 300px), 800px); } .mb-ayuda { display: none; } }

/* ============================================================
   VIDRIO: panel flotante translúcido sobre un fondo desenfocado
   (oscuro por defecto, con acento crema; el modo claro es cristal esmerilado)
   ============================================================ */
:root,
:root[data-tema='oscuro'] {
  --fondo-img: url('fondo.svg');
  --velo-fondo: rgba(14, 11, 9, .5);
  --fondo: #17130f;
  --vidrio: rgba(58, 53, 49, .42);
  --vidrio-borde: rgba(255, 255, 255, .17);
  --tarjeta: rgba(255, 255, 255, .075);
  --solida: #2d2926;
  --campo: rgba(255, 255, 255, .07);
  --tinta: #f6f2e9;
  --suave: rgba(246, 242, 233, .6);
  --borde: rgba(255, 255, 255, .12);
  --barra: rgba(255, 255, 255, .09);
  --punto: rgba(255, 255, 255, .1);
  --lienzo-mb: rgba(0, 0, 0, .22);
  --chip: rgba(255, 255, 255, .1);
  --chip-tinta: #efe9d4;
  --acento: #f3eed8;
  --acento-tinta: #1f1c18;
  --anillo-fondo: rgba(255, 255, 255, .14);
  --aviso: #ff9c92;
  --verde: #8fd8a8; --verde-fondo: rgba(143, 216, 168, .16);
  --naranja: #f4bd78; --naranja-fondo: rgba(244, 189, 120, .16);
  --morado: #cdb9f7; --morado-fondo: rgba(205, 185, 247, .16);
  --t-personal: #9cc3e6; --t-trabajo: #f2b36a; --t-proyecto: #86d4a2; --t-recordatorio: #c9b2f4; --t-tarea: #aeb6c2;
  --destacado-bg: #f3eed8; --destacado-tinta: #201d18; --destacado-suave: rgba(32, 29, 24, .62);
  --destacado-borde: rgba(0, 0, 0, .12); --destacado-barra: rgba(0, 0, 0, .07);
  --destacado-acento: #3a352c; --destacado-acento-tinta: #f3eed8;
  --sombra: 0 6px 22px rgba(0, 0, 0, .16);
  --sombra-alta: 0 10px 34px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
:root[data-tema='claro'] {
  --velo-fondo: rgba(255, 251, 244, .5);
  --fondo: #e9e4da;
  --vidrio: rgba(255, 255, 255, .56);
  --vidrio-borde: rgba(255, 255, 255, .8);
  --tarjeta: rgba(255, 255, 255, .62);
  --solida: #fffdf9;
  --campo: rgba(255, 255, 255, .75);
  --tinta: #1f1c18;
  --suave: rgba(31, 28, 24, .6);
  --borde: rgba(31, 28, 24, .09);
  --barra: rgba(31, 28, 24, .06);
  --punto: rgba(31, 28, 24, .1);
  --lienzo-mb: rgba(255, 255, 255, .35);
  --chip: rgba(31, 28, 24, .07);
  --chip-tinta: #2d2a25;
  --acento: #2c2925;
  --acento-tinta: #ffffff;
  --anillo-fondo: rgba(31, 28, 24, .1);
  --aviso: #d6453d;
  --verde: #1f8f60; --verde-fondo: rgba(31, 143, 96, .12);
  --naranja: #b86d00; --naranja-fondo: rgba(201, 120, 0, .13);
  --morado: #7447d6; --morado-fondo: rgba(116, 71, 214, .12);
  --t-personal: #3b6a8f; --t-trabajo: #c27a1a; --t-proyecto: #2f8a5c; --t-recordatorio: #7d52c7; --t-tarea: #7b8794;
  --destacado-bg: #2c2925; --destacado-tinta: #f6f2e9; --destacado-suave: rgba(246, 242, 233, .62);
  --destacado-borde: rgba(255, 255, 255, .14); --destacado-barra: rgba(255, 255, 255, .1);
  --destacado-acento: #f3eed8; --destacado-acento-tinta: #1f1c18;
  --sombra: 0 6px 22px rgba(60, 40, 20, .1);
  --sombra-alta: 0 10px 34px rgba(60, 40, 20, .18);
  color-scheme: light;
}

body { background: var(--fondo); }
/* Fondo: una imagen desenfocada que ocupa toda la pantalla */
body::before {
  content: ''; position: fixed; inset: -80px; z-index: -1;
  background-image: linear-gradient(var(--velo-fondo), var(--velo-fondo)), var(--fondo-img);
  background-size: cover; background-position: center;
  filter: blur(26px) saturate(1.15);
  transform: translateZ(0);
}
/* Panel flotante */
.app { padding: 22px; background: transparent; }
.principal {
  border-radius: 34px; overflow: hidden;
  background: var(--vidrio); border: 1px solid var(--vidrio-borde);
  -webkit-backdrop-filter: blur(28px) saturate(1.25); backdrop-filter: blur(28px) saturate(1.25);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.cabecera { padding: 16px 24px 8px; }
.vista { padding: 8px 24px calc(32px + var(--area-abajo)); }
@media (min-width: 1101px) and (min-height: 700px) { .vista:has(.inicio) { padding: 20px 24px 22px; } }
@media (max-width: 900px) {
  .app { padding: 8px; }
  .principal { border-radius: 26px; }
  .vista { padding: 4px 14px calc(28px + var(--area-abajo)); }
}

/* Tarjetas de cristal */
.panel-i, .inicio-cols .panel-i { border: 1px solid var(--borde); border-radius: 22px; box-shadow: none; background: var(--tarjeta); }
.panel-i:hover { box-shadow: var(--sombra); transform: translateY(-1px); }
.bloque, .mood, .proy, .nota-panel, .nota-editor, .mb-caja, .proy-i { border-color: var(--borde); }
.bloque, .mood, .proy { box-shadow: none; }
.panel-i.panel-destacado, .inicio-cols .panel-i.panel-destacado {
  background: var(--destacado-bg); border-color: transparent !important;
  --tinta: var(--destacado-tinta); --suave: var(--destacado-suave); --borde: var(--destacado-borde); --barra: var(--destacado-barra);
  --acento: var(--destacado-acento); --acento-tinta: var(--destacado-acento-tinta); --chip: var(--destacado-barra); --chip-tinta: var(--destacado-tinta);
  --aviso: #c0392b; --anillo-fondo: var(--destacado-barra);
  color: var(--tinta);
}
:root[data-tema='claro'] .panel-destacado { --aviso: #ff9c92; }

/* Botones y píldoras: cristal con acento crema */
.btn { background: var(--tarjeta); border-color: var(--borde); }
.btn:hover { border-color: color-mix(in srgb, var(--tinta) 40%, transparent); background: var(--barra); }
.btn.primario { background: var(--acento); color: var(--acento-tinta); border-color: transparent; }
.btn.primario:hover { filter: brightness(1.06); background: var(--acento); }
.segmentos, .pildoras { background: var(--barra); }
.segmentos button.activo, .pildoras button.activa { background: var(--acento); color: var(--acento-tinta); box-shadow: none; }
.conmutador-tema { background: var(--barra); box-shadow: none; }
.conmutador-tema span.on { background: var(--acento); color: var(--acento-tinta); }
.buscador { background: var(--tarjeta); border: 1px solid var(--borde); }
.inicio-top .buscador { border-color: var(--borde); }
.avatar { background: var(--acento); color: var(--acento-tinta); }
.pestañas button.activa { color: var(--tinta); border-bottom-color: var(--acento); }
.casilla.redonda.u-gris, :root[data-tema='oscuro'] .casilla.redonda.u-gris { border-color: color-mix(in srgb, var(--suave) 75%, transparent); opacity: 1; }
.panel-i:hover .casilla.redonda.u-gris { border-color: var(--suave); }

/* Elementos flotantes: opacos para que se lean siempre */
.modal, .menu-crear, .avisos, .mb-barra { background: var(--solida); border: 1px solid var(--borde); }
.modal-fondo { background: rgba(10, 8, 6, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#toast { background: var(--acento); color: var(--acento-tinta); }
.mb-lienzo { background-color: var(--lienzo-mb); }
.mb-herramientas, .mb-ayuda { border-color: var(--borde); }
.estado.e-completado, :root[data-tema='oscuro'] .estado.e-completado { color: var(--verde); }
.img-vacia { background: var(--barra); color: var(--suave); }
.proy-i-img, .compra-i-img { background: var(--barra); }

/* Acceso: también cristal */
.caja-login { background: var(--vidrio); border-color: var(--vidrio-borde); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.centrada { background: transparent; }

/* Ajustes: foto de fondo */

@media (max-width: 900px) {
  .inicio-top { grid-template-columns: minmax(0, 1fr) auto; }
  .inicio-saludo { min-width: 0; }
  .inicio-saludo h1 { white-space: normal; font-size: 21px; }
  .inicio-der { gap: 6px; }
  .crear-btn { padding: 0 12px; }
  .crear-btn span:not(.ico) { display: none; }
  .conmutador-tema { display: none; }
}

/* ============================================================
   VIDRIO CLARO (referencia: panel esmerilado sobre foto nítida)
   Fondo apenas desenfocado · panel gris translúcido · tarjetas blancas
   · zona derecha con tarjetas oscuras · acento naranja
   ============================================================ */
:root, :root[data-tema='oscuro'] {
  --fondo-blur: 12px;
  --acento: #f39a4f;
  --acento-tinta: #ffffff;
  --chip-tinta: #f6b37a;
}
:root[data-tema='claro'] {
  --fondo-blur: 2px;
  --velo-fondo: rgba(255, 255, 255, .05);
  --fondo: #d8d3cb;
  --vidrio: rgba(232, 232, 232, .42);
  --vidrio-borde: rgba(255, 255, 255, .7);
  --tarjeta: rgba(255, 255, 255, .86);
  --solida: #fbfbfa;
  --campo: rgba(255, 255, 255, .92);
  --tinta: #1d1d1f;
  --suave: #6e6e73;
  --borde: rgba(0, 0, 0, .06);
  --barra: rgba(0, 0, 0, .05);
  --punto: rgba(0, 0, 0, .1);
  --lienzo-mb: rgba(255, 255, 255, .45);
  --chip: rgba(240, 138, 52, .13);
  --chip-tinta: #d36a14;
  --acento: #f08a34;
  --acento-tinta: #ffffff;
  --anillo-fondo: rgba(0, 0, 0, .07);
  --aviso: #e0476b;
  --verde: #2fa84f; --verde-fondo: rgba(47, 168, 79, .12);
  --naranja: #e57b1e; --naranja-fondo: rgba(240, 138, 52, .14);
  --morado: #7a52d6; --morado-fondo: rgba(122, 82, 214, .12);
  --sombra: 0 4px 16px rgba(0, 0, 0, .06);
  --sombra-alta: 0 10px 28px rgba(0, 0, 0, .1);
}
/* Que se vea la foto alrededor del panel flotante */
@media (min-width: 1101px) { .app { padding: clamp(18px, 2.6vw, 48px); } }
body::before { filter: blur(var(--fondo-blur)) saturate(1.05); }

/* Panel esmerilado: más blur detrás, borde blanco luminoso */
.principal { border-radius: 30px; -webkit-backdrop-filter: blur(34px) saturate(1.3); backdrop-filter: blur(34px) saturate(1.3); }
:root[data-tema='claro'] .principal { box-shadow: 0 30px 80px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .8); }

/* Tarjetas blancas limpias */
:root[data-tema='claro'] .panel-i, :root[data-tema='claro'] .inicio-cols .panel-i { border-color: rgba(255, 255, 255, .6); border-radius: 18px; box-shadow: var(--sombra); }

/* Icono de cada caja: círculo de color con el icono en blanco */
.panel-i-ico { border-radius: 50%; width: 30px; height: 30px; background: var(--c-ico, var(--acento)); color: var(--c-ico-tinta, var(--acento-tinta)); }

/* Saludo: solo el nombre en negrita */
.inicio-saludo h1 { font-weight: 500; }
.inicio-saludo h1 b { font-weight: 800; }

/* Controles redondos translúcidos */
.inicio-top .buscador, .cabecera .buscador { border-radius: 99px; background: rgba(255, 255, 255, .38); border: 1px solid rgba(255, 255, 255, .55); color: var(--suave); }
:root[data-tema='oscuro'] .inicio-top .buscador, :root[data-tema='oscuro'] .cabecera .buscador { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); }
.btn-icono-cab { border-radius: 50%; background: rgba(255, 255, 255, .38); border: 1px solid rgba(255, 255, 255, .55); }
:root[data-tema='oscuro'] .btn-icono-cab { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); }
.crear-btn { border-radius: 99px; }
.btn.primario { box-shadow: 0 4px 14px color-mix(in srgb, var(--acento) 35%, transparent); }

/* Títulos de bloque con la barrita naranja de la referencia */
.bloque-cab h3, .vista-cab h1 { position: relative; }
.bloque-cab h3 { padding-left: 12px; }
.bloque-cab h3::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 3px; background: var(--acento); }

/* Zona derecha del Inicio: separada por una línea y con tarjetas oscuras (solo en modo claro y con todo a la vista) */
@media (min-width: 1101px) and (min-height: 700px) {
  :root[data-tema='claro'] .inicio-cols .col:last-child { padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .6); }
}

/* ============================================================
   ESPACIAL (referencia visionOS): foto nítida de fondo, sin panel grande,
   cabecera con píldoras y tarjetas de cristal flotando. Texto blanco sobre cristal oscuro.
   ============================================================ */
:root, :root[data-tema='oscuro'] {
  --fondo-img: url('../img/fondo.jpg');  /* foto de fondo (oficina con niebla) */
  --velo-fondo: rgba(14, 12, 10, .22); --fondo-blur: 0px;
  --vidrio: transparent; --vidrio-borde: transparent;
  --tarjeta: rgba(36, 34, 32, .48); --solida: #2c2a28; --campo: rgba(255, 255, 255, .1);
  --borde: rgba(255, 255, 255, .16); --barra: rgba(255, 255, 255, .11);
  --pildora: rgba(255, 255, 255, .16);
  --tinta: #ffffff; --suave: rgba(255, 255, 255, .7);
  --sombra: 0 14px 44px rgba(0, 0, 0, .22); --sombra-alta: 0 18px 50px rgba(0, 0, 0, .32);
}
:root[data-tema='claro'] {
  --fondo-img: url('../img/fondo.jpg');
  --velo-fondo: rgba(255, 255, 255, .4); --fondo-blur: 0px;
  --vidrio: transparent; --vidrio-borde: transparent;
  --tarjeta: rgba(255, 255, 255, .6); --solida: #fbfaf8; --campo: rgba(255, 255, 255, .8);
  --borde: rgba(255, 255, 255, .7); --barra: rgba(0, 0, 0, .06);
  --pildora: rgba(255, 255, 255, .6);
  --tinta: #1d1d1f; --suave: #5f5f64;
  --sombra: 0 12px 36px rgba(0, 0, 0, .1); --sombra-alta: 0 16px 44px rgba(0, 0, 0, .16);
}
body::before { inset: 0; filter: none; }
.app { padding: clamp(14px, 2vw, 32px); }
.principal { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 900px) { .app { padding: 8px; } .principal { border-radius: 0; } }

/* Tarjetas: cristal flotante */
:root[data-tema] .panel-i, :root[data-tema] .inicio-cols .panel-i,
:root[data-tema] .bloque, :root[data-tema] .mood, :root[data-tema] .proy, :root[data-tema] .nota-panel,
:root[data-tema] .nota-editor, :root[data-tema] .mb-caja, :root[data-tema] .rejilla-mes .dia, :root[data-tema] .dia-semana {
  background: var(--tarjeta); border: 1px solid var(--borde); box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
}
:root[data-tema] .panel-i, :root[data-tema] .inicio-cols .panel-i { border-radius: 24px; }
:root[data-tema] .panel-i:hover { box-shadow: var(--sombra-alta); }
:root[data-tema='claro'] .inicio-cols .col:last-child { border-left: 0; padding-left: 0; }

/* Cabecera: píldoras de cristal */
:root[data-tema] .inicio-top .buscador, :root[data-tema] .cabecera .buscador,
:root[data-tema] .btn-icono-cab, :root[data-tema] .conmutador-tema, :root[data-tema] .btn {
  background: var(--pildora); border: 1px solid var(--borde);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
:root[data-tema] .btn.primario { background: var(--acento); border-color: transparent; }
:root[data-tema] .conmutador-tema span.on { background: var(--acento); color: var(--acento-tinta); }
.inicio-saludo h1, .inicio-saludo p, .vista-cab h1, .vista-cab p { text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
:root[data-tema='claro'] .inicio-saludo h1, :root[data-tema='claro'] .inicio-saludo p, :root[data-tema='claro'] .vista-cab h1, :root[data-tema='claro'] .vista-cab p { text-shadow: 0 1px 10px rgba(255, 255, 255, .6); }

/* Tareas y listas sobre cristal oscuro */
:root[data-tema='oscuro'] .casilla.redonda.u-gris { border-color: rgba(255, 255, 255, .6); }
:root[data-tema='oscuro'] .panel-i .chip-origen { background: rgba(255, 255, 255, .16); color: #fff; }
:root[data-tema='oscuro'] .panel-i .panel-i-enlace { color: var(--acento-texto, #ffc89a); }
:root[data-tema='oscuro'] { --aviso: #ffa3b5; --verde: #9be3b2; --naranja: #ffc48a; --chip-tinta: #ffd2ad; --acento: #f39a4f; --acento-tinta: #fff; }

:root[data-tema='claro'] .panel-i .panel-i-enlace, :root[data-tema='claro'] .bloque-cab .btn-suave.enlace { color: var(--acento-texto, #b9540a); }
:root[data-tema='claro'] .panel-i .chip-origen { color: color-mix(in srgb, var(--c, #c25a0a) 80%, #000); }

/* Elementos sueltos de las páginas (sin tarjeta) también sobre cristal, para que se lean sobre la foto */
:root[data-tema] .pestañas, :root[data-tema] .ficha-datos, :root[data-tema] .selector-mes, :root[data-tema] .barra-herr, :root[data-tema] .leyenda-tipos {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3);
}
:root[data-tema] .pestañas { padding: 4px 8px 0; border-radius: 16px; }
:root[data-tema] .ficha-datos { padding: 14px 16px; }
:root[data-tema] .selector-mes, :root[data-tema] .barra-herr { padding: 10px 12px; }
:root[data-tema] .leyenda-tipos { margin: 0 0 14px; padding: 8px 14px; }
:root[data-tema] .segmentos { background: var(--barra); }

/* ============================================================
   COMPOSICIÓN FLOTANTE (referencia visionOS): no llena toda la página
   + dock inferior con Inicio · Proyectos · Cape · Maxellan
   ============================================================ */
:root, :root[data-tema='oscuro'] { --velo-fondo: rgba(10, 9, 8, .38); --fondo-blur: 1px; --tarjeta: rgba(62, 60, 58, .46); }
:root[data-tema='claro'] { --velo-fondo: rgba(255, 255, 255, .34); --fondo-blur: 1px; }
body::before { inset: -20px; filter: blur(var(--fondo-blur)); }
.app { padding: 0; }
.vista { padding: 18px clamp(16px, 4vw, 64px) 120px; }
.inicio, .vista-int { max-width: 1240px; margin: 0 auto; }
.cabecera { padding: 18px clamp(16px, 4vw, 64px) 0; justify-content: center; }
.cabecera .buscador { flex: 0 1 560px; margin: 0; }
.cabecera .cab-acciones { margin-left: 12px; }
@media (min-width: 1101px) and (min-height: 700px) {
  .vista:has(.inicio) { padding: 22px clamp(24px, 6vw, 110px) 112px; }
  .inicio { max-width: 1180px; }
}

/* Dock */
.dock {
  position: fixed; left: 50%; bottom: calc(18px + var(--area-abajo)); transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 99px;
  background: var(--tarjeta); border: 1px solid var(--borde); box-shadow: var(--sombra-alta);
  -webkit-backdrop-filter: blur(28px) saturate(1.3); backdrop-filter: blur(28px) saturate(1.3);
}
.dock-item {
  position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%;
  color: var(--tinta); text-decoration: none; transition: background-color .2s, transform .2s;
}
.dock-item:hover { background: var(--barra); transform: translateY(-2px); }
.dock-item.activo { background: var(--acento); color: var(--acento-tinta); }
.dock-letra { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c); color: #fff; font-size: 14px; font-weight: 700; }
.dock-item.activo .dock-letra { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
/* Logo de empresa: círculo con el color de fondo del logo */
.dock-logo { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 8px rgba(0, 0, 0, .28); }
.dock-logo img { width: 62%; height: 62%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.dock-logo.ancho img { width: 80%; height: auto; }
.dock-item:has(.dock-logo):hover { background: none; }
.dock-item.activo:has(.dock-logo) { background: none; }
.dock-item.activo .dock-logo { outline: 2px solid var(--acento); outline-offset: 2px; }
.dock-nombre { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 5px 11px; border-radius: 99px; background: var(--solida); color: var(--tinta); border: 1px solid var(--borde); font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.dock-item:hover .dock-nombre, .dock-item:focus-visible .dock-nombre { opacity: 1; transform: translateX(-50%); }
@media (max-width: 900px) { .vista { padding: 12px 14px 112px; } .cabecera { padding: 12px 14px 0; } }

.vista-int:has(.pagina-estrecha) .vista-cab { max-width: 680px; margin-left: auto; margin-right: auto; }
/* ---------- Sin cabecera: píldora de utilidades abajo a la derecha ---------- */
.vista { padding-top: 28px; }
@media (min-width: 1101px) and (min-height: 700px) { .vista:has(.inicio) { padding-top: 32px; } }
@media (max-width: 900px) { .vista { padding-top: 16px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   Resalte al pasar el ratón por la información de las cajas
   (igual que ya hacían Objetivos y Próximos eventos: fondo --barra)
   ============================================================ */
.panel-i .dia-lista, .panel-i .compra-i-lista, .panel-i .nota-i-lista { margin-left: -8px; margin-right: -8px; }
.panel-i .dia-fila, .panel-i .compra-i, .panel-i .nota-i { position: relative; border-radius: 12px; border-bottom-color: transparent; }
.panel-i .dia-fila { padding-left: 10px; padding-right: 10px; cursor: pointer; }
.panel-i .compra-i, .panel-i .nota-i { padding-left: 8px; padding-right: 8px; }
/* el separador pasa a una línea propia para que el resalte sea redondeado */
.panel-i .dia-fila::after, .panel-i .compra-i::after, .panel-i .nota-i::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 1px; pointer-events: none;
  background: color-mix(in srgb, var(--borde) 55%, transparent);
}
.panel-i .dia-fila:last-child::after, .panel-i li:last-child > .compra-i::after, .panel-i li:last-child > .nota-i::after { display: none; }
@media (hover: hover) {
  .panel-i .dia-fila:hover, .panel-i .compra-i:hover, .panel-i .nota-i:hover { background: var(--barra); }
  .panel-i .dia-fila:hover::after, .panel-i .dia-fila:has(+ .dia-fila:hover)::after,
  .panel-i .compra-i:hover::after, .panel-i li:has(+ li:hover) > .compra-i::after,
  .panel-i .nota-i:hover::after, .panel-i li:has(+ li:hover) > .nota-i::after { opacity: 0; }
}

/* ============================================================
   COLOR PRINCIPAL: grafito / plata (el de la marca Maxellan)
   --acento = botones y resaltes · --acento-tinta = texto sobre el acento
   --acento-texto = enlaces y texto de acento legible sobre el fondo
   ============================================================ */
:root[data-tema='oscuro'] { --acento: #eceff3; --acento-tinta: #1d2025; --acento-texto: #eceff3; --chip-tinta: #eceff3; }
:root[data-tema='claro'] { --acento: #3a3d42; --acento-tinta: #ffffff; --acento-texto: #3a3d42; --chip: color-mix(in srgb, #3a3d42 12%, transparent); --chip-tinta: #3a3d42; }

/* Logo de empresa en la cabecera de su página */
.logo-cab { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 8px rgba(0, 0, 0, .28); }
.logo-cab img { width: 62%; height: 62%; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.logo-cab.ancho img { width: 80%; height: auto; }

/* ============================================================
   INICIO EN EL MÓVIL: panel de mosaicos que cabe en una pantalla (js/inicio-movil.js)
   ============================================================ */
@media (max-width: 720px) {
  .vista:has(.bento) { padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(88px + var(--area-abajo)); }
  .bento {
    --curva-t: cubic-bezier(.2, .8, .2, 1);
    display: grid; gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: 'hoy hoy' 'tareas eventos' 'tareas presu' 'compras notas' 'obj obj';
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) auto;
    /* alto definido: los mosaicos se reparten la pantalla (si no cabe, la página se desplaza) */
    height: max(720px, calc(100dvh - 12px - env(safe-area-inset-top, 0px) - 88px - var(--area-abajo)));
  }
  .tile { min-width: 0; }
  .z-hoy { grid-area: hoy; } .z-tareas { grid-area: tareas; } .z-presu { grid-area: presu; }
  .z-eventos { grid-area: eventos; } .z-compras { grid-area: compras; } .z-notas { grid-area: notas; } .z-obj { grid-area: obj; }
  .panel-i.tile {
    display: flex; flex-direction: column; gap: 8px; padding: 13px 14px; border-radius: 24px; overflow: hidden;
    color: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform .18s var(--curva-t), box-shadow .25s ease;
  }
  .panel-i.tile:active { transform: scale(.97); }
  .panel-i.tile:hover { transform: none; box-shadow: none; }
  .tile-cab { display: flex; align-items: center; gap: 8px; flex: none; }
  .tile-cab h3 { margin: 0; font-size: 14px; font-weight: 650; }
  .tile .panel-i-ico { width: 26px; height: 26px; flex: none; }
  .tile-vacio { margin: auto 0; font-size: 13px; color: var(--suave); }
  .tile-pie { margin: 0; flex: none; font-size: 12.5px; color: var(--suave); }
  .tile-pie b { color: var(--tinta); font-weight: 650; }

  /* Cifra grande */
  .tile-cifra { display: flex; align-items: baseline; gap: 6px; flex: none; }
  .tile-cifra strong { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
  .tile-cifra span { font-size: 13px; color: var(--suave); }
  .tile-cifra.pequena { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
  .tile-cifra.pequena strong { font-size: 21px; letter-spacing: -.01em; }
  .tile-aviso { align-self: flex-start; flex: none; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, var(--aviso) 20%, transparent); color: var(--aviso); font-size: 12px; font-weight: 650; }

  /* Fecha en grande */
  .tile-fecha { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; min-width: 46px; line-height: 1.05; }
  .tile-fecha small { font-size: 11.5px; color: var(--suave); text-transform: capitalize; }
  .tile-fecha strong { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }

  /* Listas dentro del mosaico */
  .tile-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; min-width: 0; min-height: 0; overflow: hidden; }
  .tile-lista li { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 13.5px; }
  .tile-lista small { margin-left: auto; flex: none; color: var(--suave); font-size: 12px; }
  .tile-lista-v { flex: 1; gap: 7px; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
  .tile-lista-v li { font-size: 13px; }
  .tile-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tile-pt { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--suave); }
  .tile-pt.rojo { border-color: var(--aviso); background: var(--aviso); }
  .tile-pt.ev { border-color: transparent; background: var(--acento); }

  /* Mi día */
  .tile-hoy { display: flex; gap: 14px; align-items: center; flex: 1; min-height: 0; }
  .tile-hoy .tile-lista { flex: 1; }

  /* Presupuesto */
  .tile-presu { display: flex; align-items: center; gap: 10px; flex: 1; min-height: 0; }
  .tile-presu .anillo { flex: none; }
  .tile-presu .anillo-centro strong { font-size: 15px; }

  /* Próximo evento */
  .tile-evento { display: flex; align-items: center; gap: 10px; flex: 1; min-height: 0; min-width: 0; }
  .tile-evento-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .tile-evento-tx strong { font-size: 14px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tile-evento-tx small { font-size: 12px; line-height: 1.25; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tile-evento-tx em { font-style: normal; font-size: 12px; color: var(--acento-texto, var(--acento)); font-weight: 600; }

  /* Compras: collage de fotos */
  .tile-collage { flex: 1; min-height: 0; display: grid; gap: 4px; border-radius: 14px; overflow: hidden; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .tile-collage > * { width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block; background: var(--barra); }
  .tile-collage.n1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .tile-collage.n2 { grid-template-rows: minmax(0, 1fr); }
  .tile-collage.n3 > :first-child { grid-row: span 2; }

  /* Notas */
  .tile-nota { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 3px; }
  .tile-nota strong { font-size: 14px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .tile-nota p { margin: 0; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); font-size: 12.5px; line-height: 1.35; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  /* Objetivos */
  ol.tile-obj { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  ol.tile-obj li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 13.5px; }

  /* Entrada: los mosaicos suben escalonados (solo la primera vez) */
  .bento.entra .tile { animation: tile-in .55s var(--curva-t) both; animation-delay: calc(var(--i, 0) * 60ms); }
  @keyframes tile-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

  /* Dock y botón «+» en la misma fila inferior */
  .dock { padding: 6px 8px; gap: 4px; }
  .dock-item { width: 44px; height: 44px; }
}

/* ============================================================
   «+» DENTRO DEL DOCK: el dock cambia de navegación a acciones de crear (js/dock.js)
   ============================================================ */
.dock { --curva: cubic-bezier(.2, .8, .2, 1); gap: 6px; }
.dock-cuerpo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); height: 50px; transition: width .5s var(--curva); }
.dock-fila { grid-area: 1 / 1; justify-self: center; align-self: center; width: max-content; display: flex; align-items: center; gap: 6px; }
.dock-nav { transition: opacity .25s .1s, transform .45s .05s var(--curva), visibility 0s; }
.dock-acciones { gap: 4px; opacity: 0; transform: translateX(28px) scale(.92); visibility: hidden; pointer-events: none; transition: opacity .2s, transform .35s var(--curva), visibility 0s .35s; }
.dock.creando .dock-nav { opacity: 0; transform: translateX(-28px) scale(.92); visibility: hidden; pointer-events: none; transition: opacity .2s, transform .35s var(--curva), visibility 0s .35s; }
.dock.creando .dock-acciones { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity .3s .1s, transform .5s .05s var(--curva), visibility 0s; }
.dock-mas {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: var(--acento); color: var(--acento-tinta); cursor: pointer; transition: background-color .3s, color .3s, transform .2s;
}
.dock-mas:hover { transform: scale(1.06); }
.dock-mas .ico { display: grid; transition: transform .5s var(--curva); }
.dock.creando .dock-mas { background: var(--barra); color: var(--tinta); }
.dock.creando .dock-mas .ico { transform: rotate(135deg); }
.dock-accion {
  position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--tinta); cursor: pointer; opacity: 0; transform: translateY(10px) scale(.8);
  transition: opacity .15s, transform .15s, background-color .2s;
}
.dock.creando .dock-accion { opacity: 1; transform: none; transition: opacity .3s calc(.12s + var(--k, 0) * 40ms), transform .45s calc(.08s + var(--k, 0) * 40ms) var(--curva), background-color .2s; }
.dock-accion:hover { background: var(--barra); }
/* Nombre de cada acción al pasar el ratón (en el móvil solo se ven los iconos) */
.dock-accion[data-nombre]::after {
  content: attr(data-nombre); position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(4px);
  padding: 5px 11px; border-radius: 99px; background: var(--solida); color: var(--tinta); border: 1px solid var(--borde);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s;
}
.dock-accion[data-nombre]:hover::after, .dock-accion[data-nombre]:focus-visible::after { opacity: 1; transform: translateX(-50%); }
@media (max-width: 720px) {
  .dock { gap: 6px; padding: 6px 8px; }
  .dock-cuerpo { height: 46px; }
  .dock-mas, .dock-accion { width: 42px; height: 42px; }
}

/* Móviles grandes (iPhone Pro Max, 430–440 px): más aire y letra algo mayor */
@media (min-width: 420px) and (max-width: 720px) {
  .bento { gap: 12px; }
  .panel-i.tile { padding: 16px 17px; gap: 10px; }
  .tile-cab h3 { font-size: 15px; }
  .tile .panel-i-ico { width: 28px; height: 28px; }
  .tile-cifra strong { font-size: 46px; }
  .tile-cifra.pequena strong { font-size: 25px; }
  .tile-cifra span { font-size: 14px; }
  .tile-fecha strong { font-size: 34px; }
  .tile-lista li { font-size: 14.5px; }
  .tile-lista-v li { font-size: 14px; }
  .tile-evento-tx strong { font-size: 15px; }
  .tile-evento-tx small { font-size: 12.5px; }
  .tile-nota strong { font-size: 15px; }
  .tile-nota p { font-size: 13.5px; -webkit-line-clamp: 7; }
  .tile-pie { font-size: 13px; }
  ol.tile-obj li { font-size: 14.5px; }
  .tile-presu .anillo-centro strong { font-size: 17px; }
}

/* Etiquetas de empresa con el color de su marca (Cape: morado · Maxellan: azul pizarra) */
:root[data-tema] .chip-origen.chip-empresa, :root[data-tema] .panel-i .chip-origen.chip-empresa { background: var(--c); color: #fff; }

/* ============================================================
   PÁGINA DE EMPRESA (Maxellan, Cape): bloques en dos columnas
   ============================================================ */
.vista-int:has(.empresa-resumen) .vista-cab { max-width: 1100px; margin-left: auto; margin-right: auto; }
.empresa-resumen { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.emp-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.emp-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.emp-bloque { padding: 18px 20px 20px; }
.emp-bloque .panel-i-cab { margin-bottom: 10px; }
.emp-bloque .contador { margin-left: auto; }
.emp-bloque textarea { width: 100%; min-height: 170px; }
.emp-bloque .seccion-cuerpo { min-width: 0; }
@media (max-width: 900px) {
  .emp-cols { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .emp-col { display: contents; }
  .emp-bloque { order: var(--o, 0); }
}