/* Base compartida de las pantallas de la app de Gracia v3.
   Reglas: una pantalla, un propósito · grupos con rótulo y bordes visibles ·
   una sola forma de fila · el dorado solo para la acción principal y lo activo. */
:root{
  --navy-950:#070C18; --navy-900:#0F172A; --navy-800:#18223A; --navy-700:#26324D;
  --gold:#D4AF37; --gold-ink:#8A6D12;
  --bg:#E9EDF2;            /* fondo de la app: gris azulado, se distingue del blanco */
  --surface:#FFFFFF;       /* grupos y tarjetas */
  --edge:#CBD2DD;          /* borde de los grupos */
  --edge-soft:#E3E7EE;     /* separador entre filas */
  --ink:#0F172A; --ink-2:#465166; --ink-3:#7B8596;
  --ok:#2E8B6B; --bad:#C0492F;
  --r:16px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --pad:16px; --tab-h:64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.45;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin:0}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--pad)}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Barra superior */
.app-top{position:sticky;top:0;z-index:50;background:var(--navy-900);color:#fff;padding-top:env(safe-area-inset-top)}
.app-top .wrap{height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.app-top .brand img{height:44px;width:auto;margin-left:-6px}
.app-nav{display:none}
.app-actions{display:flex;align-items:center;gap:4px}
.icon-btn{position:relative;width:42px;height:42px;border-radius:50%;border:0;background:none;color:#fff;display:grid;place-items:center;transition:background .2s}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.icon-btn .dot{position:absolute;top:9px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--navy-900)}
.avatar{width:36px;height:36px;flex:none;margin-left:6px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.78rem;background:#fff;color:var(--navy-900)}

/* Rótulo de grupo */
.label{margin:26px 4px 10px;font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}

/* Grupo: una caja blanca con borde visible y filas separadas por una línea */
.group{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;box-shadow:0 1px 2px rgba(15,23,42,.06)}
.row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;min-height:68px;padding:12px 14px 12px 16px;border-top:1px solid var(--edge-soft);background:var(--surface);transition:background .15s}
.row:first-child{border-top:0}
a.row:hover{background:#F6F8FB}
a.row:active{background:#EEF1F6}
.row-ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--bg);color:var(--navy-700)}
.row-date{width:40px;height:44px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);color:var(--navy-900);line-height:1}
.row-date span{font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.row-date b{font-size:1.05rem;font-weight:800;margin-top:3px}
.row-main{min-width:0}
.row-main b{display:block;font-size:.98rem;font-weight:600;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-main small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:.84rem;line-height:1.35;color:var(--ink-2);margin-top:2px}
.row-end{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:.84rem;font-weight:500}
.row-end .icon{width:18px;height:18px}
.count{min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;background:var(--navy-900);color:#fff;font-size:.72rem;font-weight:700}
.group-foot{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-top:1px solid var(--edge-soft);font-size:.88rem;font-weight:600;color:var(--navy-700);transition:background .15s}
.group-foot:hover{background:#F6F8FB}
.group-foot .icon{width:16px;height:16px}

/* Botones: uno principal por pantalla */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:38px;padding:0 1rem;border-radius:10px;border:1px solid transparent;font-weight:700;font-size:.88rem;white-space:nowrap;transition:transform .15s var(--ease),background .15s}
.btn:active{transform:scale(.96)}
.btn-gold{background:var(--gold);color:var(--navy-950)}
.btn-gold:hover{background:#DEBB48}

/* Barra inferior (teléfono) */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:60;height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-top:1px solid var(--edge)}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink-3);font-size:.7rem;font-weight:600}
.tab .icon{width:22px;height:22px}
.tab.on{color:var(--navy-900)}
.tab.on .icon{stroke-width:2.2}
.tab.on span{position:relative}
.tab.on span::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:3px;border-radius:3px;background:var(--gold)}

.solo-movil{display:block}
.solo-escritorio{display:none}

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

@media (min-width:960px){
  :root{--pad:32px}
  .tabs,.solo-movil{display:none}
  .solo-escritorio{display:block}
  .app-top .wrap{height:68px}
  .app-top .brand img{height:54px}
  .app-nav{display:flex;align-items:center;gap:28px;font-size:.92rem;font-weight:600;color:rgba(255,255,255,.75)}
  .app-nav a{padding:8px 0;border-bottom:2px solid transparent;transition:color .2s}
  .app-nav a:hover{color:#fff}
  .app-nav a.on{color:#fff;border-color:var(--gold)}
}