:root{
  --bg:#f4f6f8;
  --card:#ffffff;
  --text:#1f2933;
  --muted:#68707a;
  --primary:#1d4f91;

  /* Custodia */
  --german:#ffffff;
  --michelle:#dbeeff;

  --line:#dfe3e8;
  --danger:#9a2d2d;

  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-top:env(safe-area-inset-top,0px);
}

/* =========================================================
   BASE
   ========================================================= */

*{
  box-sizing:border-box;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  min-width:320px;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.4;
}

a{
  color:var(--primary);
  text-decoration:none;
}

a,
button,
input,
select,
textarea,
summary{
  touch-action:manipulation;
}

img{
  max-width:100%;
  height:auto;
}

h1{
  margin:0 0 18px;
  font-size:clamp(24px,5vw,34px);
  line-height:1.15;
}

h2{
  margin-top:0;
  line-height:1.2;
}

h3{
  line-height:1.25;
}

p{
  line-height:1.5;
}

/* =========================================================
   HEADER / NAVEGACION
   ========================================================= */

header{
  position:sticky;
  top:0;
  z-index:30;

  display:flex;
  align-items:center;
  gap:18px;

  padding:
    calc(10px + var(--safe-top))
    16px
    10px;

  background:#ffffff;
  border-bottom:1px solid var(--line);
}

.brand{
  flex:0 0 auto;
  font-size:20px;
  font-weight:700;
  white-space:nowrap;
}

.desktop-nav{
  display:flex;
  flex:1;
  flex-wrap:wrap;
  gap:12px;
}

.desktop-nav a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:6px 4px;
  font-weight:600;
}

.user{
  flex:0 0 auto;
  color:var(--muted);
  font-size:13px;
  white-space:nowrap;
}

/* Menu movil */

.mobile-nav{
  display:none;
  position:relative;
  margin-left:auto;
}

.mobile-nav summary{
  display:flex;
  align-items:center;
  justify-content:center;

  min-width:44px;
  min-height:44px;
  padding:8px 12px;

  list-style:none;
  cursor:pointer;

  background:#ffffff;
  border:1px solid var(--line);
  border-radius:10px;

  font-size:20px;
  line-height:1;
}

.mobile-nav summary::-webkit-details-marker{
  display:none;
}

.mobile-menu{
  position:absolute;
  top:50px;
  right:0;

  width:min(290px,calc(100vw - 24px));

  padding:8px;

  background:#ffffff;
  border:1px solid var(--line);
  border-radius:12px;

  box-shadow:0 10px 30px rgba(0,0,0,.14);
}

.mobile-menu a{
  display:block;
  min-height:44px;
  padding:12px;

  border-radius:8px;
  font-weight:600;
}

.mobile-menu a:active{
  background:#eef3f8;
}

.mobile-user{
  margin-top:5px;
  padding:12px;

  border-top:1px solid var(--line);

  color:var(--muted);
  font-size:13px;
}

/* =========================================================
   CONTENIDO
   ========================================================= */

main{
  width:100%;
  max-width:1200px;

  margin:0 auto;

  padding:
    20px
    18px
    calc(24px + var(--safe-bottom));
}

.card{
  margin-bottom:18px;
  padding:18px;

  background:var(--card);

  border:1px solid var(--line);
  border-radius:14px;

  box-shadow:0 1px 2px rgba(0,0,0,.025);
}

.grid{
  display:grid;
  gap:16px;
}

.cards{
  grid-template-columns:
    repeat(auto-fit,minmax(210px,1fr));
}

.big{
  font-size:28px;
  font-weight:700;
  line-height:1.1;
}

.muted-text{
  color:var(--muted);
  line-height:1.45;
}

/* =========================================================
   COLORES CUSTODIA
   ========================================================= */

.german{
  background:var(--german)!important;
  border:1px solid #d0d7de!important;
}

.michelle{
  background:var(--michelle)!important;
  border:1px solid #b8d8f3!important;
}

/* =========================================================
   CALENDARIO
   ========================================================= */

.calendar-grid{
  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

  gap:14px;
}

.month{
  padding:10px;

  background:#ffffff;

  border:1px solid var(--line);
  border-radius:12px;
}

.month h2{
  margin:3px 0 8px;

  font-size:20px;
  text-align:center;
}

.weekheads,
.days{
  display:grid;

  grid-template-columns:
    repeat(7,minmax(0,1fr));

  gap:3px;
}

.weekheads span{
  padding:4px 0;

  color:var(--muted);

  font-size:11px;
  font-weight:700;
  text-align:center;
}

.day,
.empty{
  display:block;

  min-width:0;
  min-height:42px;

  padding:5px;

  border-radius:7px;

  color:#222222;
}

.day{
  position:relative;

  border:1px solid rgba(0,0,0,.05);
}

.day b{
  font-size:14px;
  font-weight:700;
}

.day:active{
  outline:2px solid var(--primary);
  outline-offset:1px;
}

.empty{
  background:transparent;
}

/* Candado */

.lock-icon{
  position:absolute;
  top:3px;
  right:3px;

  font-size:12px;
  line-height:1;

  pointer-events:none;
}

.blocked-day{
  box-shadow:
    inset 0 0 0 1px rgba(90,90,90,.08);
}

/* Leyenda */

.legend{
  margin-top:15px;
  padding:8px 0;

  line-height:2;
}

.sw{
  display:inline-block;

  width:15px;
  height:15px;

  margin:
    0
    4px
    0
    12px;

  vertical-align:-2px;

  border:1px solid #cccccc;
  border-radius:3px;
}

.legend-lock{
  display:inline-block;

  margin-left:14px;
  margin-right:4px;

  font-size:14px;
}

/* =========================================================
   NAVEGACION ENTRE ANOS
   ========================================================= */

.calendar-year-nav{
  display:grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:center;

  gap:10px;

  margin-bottom:16px;
}

.calendar-year-nav a{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:44px;

  padding:9px 14px;

  background:#ffffff;

  border:1px solid var(--line);
  border-radius:10px;

  font-weight:700;
}

.calendar-year-nav a:first-child{
  justify-self:start;
}

.calendar-year-nav a:last-child{
  justify-self:end;
}

.calendar-year-nav strong{
  font-size:20px;
  text-align:center;
}

/* =========================================================
   TABLAS
   ========================================================= */

.table-wrap{
  overflow-x:auto;

  -webkit-overflow-scrolling:touch;

  background:#ffffff;

  border:1px solid var(--line);
  border-radius:12px;
}

table{
  width:100%;

  border-collapse:collapse;
}

th,
td{
  padding:11px;

  border-bottom:1px solid var(--line);

  text-align:left;
  white-space:nowrap;
}

th{
  background:#fafafa;
}

tbody tr:last-child td{
  border-bottom:0;
}

/* =========================================================
   FORMULARIOS
   ========================================================= */

.form-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(180px,1fr));

  gap:12px;

  margin-top:15px;
}

label{
  display:grid;
  gap:6px;

  font-size:13px;
  font-weight:600;
}

input,
select,
textarea,
button{
  min-height:44px;

  padding:11px 12px;

  background:#ffffff;

  border:1px solid #cfd5dc;
  border-radius:9px;

  font:inherit;
  font-size:16px;
}

input,
select,
textarea{
  width:100%;
  color:var(--text);
}

textarea{
  min-height:92px;
  resize:vertical;
}

button{
  cursor:pointer;

  background:var(--primary);
  color:#ffffff;

  border:0;

  font-weight:700;
}

button:active{
  transform:translateY(1px);
}

.danger{
  background:var(--danger);
}

.span2{
  grid-column:1/-1;
}

.inline{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* =========================================================
   AVISOS
   ========================================================= */

.notice,
.flash{
  margin:12px 0;
  padding:12px;

  border-radius:9px;
}

.notice{
  background:#fff8d9;
}

.ok{
  background:#e0f4e6;
}

.err{
  background:#f8dede;
}

/* =========================================================
   LOGIN
   ========================================================= */

.login{
  min-height:100svh;

  display:grid;
  place-items:center;

  padding:16px;

  background:#e9eef3;
}

.login-shell{
  width:min(430px,100%);

  overflow:hidden;

  background:#ffffff;

  border:1px solid var(--line);
  border-radius:18px;

  box-shadow:0 12px 35px rgba(0,0,0,.12);
}

.login-photo{
  display:block;

  width:100%;
  height:clamp(220px,38svh,360px);

  object-fit:cover;
  object-position:50% 43%;
}

.login-card{
  margin:0;
  padding:20px;

  border:0;
  border-radius:0;
}

.login-card h1{
  margin-bottom:5px;
}

.login-card p{
  margin-top:0;
  color:var(--muted);
}

.login-card label{
  margin:12px 0;
}

.login-card button{
  width:100%;
  margin-top:8px;
}

/* =========================================================
   DETALLE
   ========================================================= */

dl{
  display:grid;

  grid-template-columns:
    180px 1fr;

  gap:9px;
}

dt{
  font-weight:700;
}

dd{
  margin:0;
  overflow-wrap:anywhere;
}

/* =========================================================
   DETAILS / SUMMARY
   ========================================================= */

details{
  width:100%;
}

summary{
  display:flex;
  align-items:center;

  min-height:44px;

  cursor:pointer;
}

/* =========================================================
   BLOQUEOS
   ========================================================= */

.blocked-card{
  border-color:#d5d9de;
}

.lock-detail{
  padding:14px 0;

  border-bottom:1px solid var(--line);
}

.lock-detail:first-of-type{
  padding-top:4px;
}

.lock-detail:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.lock-title{
  margin-bottom:12px;

  font-size:18px;
  font-weight:700;
}

.unlock-form{
  margin-top:16px;
}

.lock-button{
  width:100%;
}

/* =========================================================
   ADVERTENCIA DE BLOQUEOS EN PROPUESTAS
   ========================================================= */

.lock-warning{
  background:#fffaf0;

  border:2px solid #c89b31;
}

.lock-warning h2{
  margin-top:0;
}

.lock-warning-item{
  margin:12px 0;
  padding:12px;

  background:#ffffff;

  border:1px solid #e2d4ae;
  border-radius:10px;
}

.lock-warning-reason{
  margin-top:6px;

  font-weight:700;
}

.lock-warning-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;

  gap:10px;

  margin-top:18px;
}

.lock-warning-actions form{
  margin:0;
}

.secondary-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:44px;

  padding:11px 14px;

  background:#ffffff;
  color:var(--text);

  border:1px solid #cfd5dc;
  border-radius:9px;

  font-weight:700;
}

/* =========================================================
   MOVIL
   ========================================================= */

@media(max-width:760px){

  header{
    gap:10px;

    padding-left:12px;
    padding-right:12px;
  }

  .desktop-nav,
  .user{
    display:none;
  }

  .mobile-nav{
    display:block;
  }

  .brand{
    font-size:18px;
  }

  main{
    padding:
      14px
      10px
      calc(20px + var(--safe-bottom));
  }

  h1{
    margin-bottom:14px;
  }

  .card{
    margin-bottom:12px;
    padding:14px;

    border-radius:12px;
  }

  .cards{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .cards .card:first-child,
  .cards .card:last-child{
    grid-column:1/-1;
  }

  .big{
    font-size:25px;
  }

  /* Formularios */

  .form-grid{
    grid-template-columns:1fr;
  }

  .span2{
    grid-column:auto;
  }

  /* Calendario */

  .calendar-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .month{
    padding:9px;
  }

  .month h2{
    margin-bottom:9px;
  }

  .day,
  .empty{
    min-height:44px;
    padding:6px 4px;
  }

  .day b{
    font-size:14px;
  }

  .lock-icon{
    top:3px;
    right:3px;

    font-size:12px;
  }

  /* Detalles */

  dl{
    grid-template-columns:1fr;
    gap:3px;
  }

  dt{
    margin-top:10px;
  }

  /* Tablas convertidas en tarjetas */

  .responsive-table{
    overflow:visible;

    background:transparent;

    border:0;
  }

  .responsive-table table,
  .responsive-table thead,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table th,
  .responsive-table td{
    display:block;
    width:100%;
  }

  .responsive-table thead{
    display:none;
  }

  .responsive-table tbody{
    display:grid;
    gap:10px;
  }

  .responsive-table tr{
    padding:8px 12px;

    background:#ffffff;

    border:1px solid var(--line);
    border-radius:12px;
  }

  .responsive-table td{
    display:grid;

    grid-template-columns:
      minmax(105px,38%) 1fr;

    align-items:start;

    gap:10px;

    padding:10px 0;

    white-space:normal;
    overflow-wrap:anywhere;

    border-bottom:1px solid #eef1f4;
  }

  .responsive-table td:last-child{
    border-bottom:0;
  }

  .responsive-table td::before{
    content:attr(data-label);

    color:var(--muted);

    font-size:12px;
    font-weight:700;
  }

  .responsive-table .inline{
    justify-content:flex-start;
  }

  .responsive-table button{
    width:auto;
    min-width:90px;
  }

  /* Bloqueos */

  .lock-detail{
    padding:12px 0;
  }

  .lock-title{
    font-size:17px;
  }

  .unlock-form button{
    width:100%;
  }

  .lock-warning-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .lock-warning-actions a,
  .lock-warning-actions form,
  .lock-warning-actions button{
    width:100%;
  }
}

/* =========================================================
   MOVILES PEQUE0ˆ5OS
   ========================================================= */

@media(max-width:390px){

  .cards{
    grid-template-columns:1fr;
  }

  .cards .card:first-child,
  .cards .card:last-child{
    grid-column:auto;
  }

  .login-photo{
    height:34svh;
  }

  .day,
  .empty{
    min-height:41px;
  }

  .month h2{
    font-size:18px;
  }

  .lock-icon{
    font-size:11px;
  }

  .calendar-year-nav a{
    padding:9px 10px;
    font-size:14px;
  }

  .calendar-year-nav strong{
    font-size:18px;
  }
}
/* =========================================================
   MES ACTUAL / DIA DE HOY
   ========================================================= */

.month{
  scroll-margin-top:90px;
}

.day.today b{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:28px;
  height:28px;

  padding:0 6px;

  background:#ffffff;
  color:var(--primary);

  border:2px solid var(--primary);
  border-radius:999px;

  font-weight:700;
}
/* =========================================================
   LOGIN - FECHA DE NACIMIENTO
   ========================================================= */

.birth-date{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    auto
    minmax(0,1fr)
    auto
    minmax(0,1.5fr);

  gap:7px;
  align-items:center;
}

.birth-date input{
  min-width:0;
  text-align:center;
  font-size:18px;
  font-weight:700;
}

.birth-date span{
  color:var(--muted);
  font-weight:700;
}

.remember-note{
  margin:14px 0 8px;
  padding:10px 12px;

  background:#f5f7f9;

  border:1px solid var(--line);
  border-radius:9px;

  color:var(--muted);

  font-size:13px;
  line-height:1.4;
}
/* Ano pendiente de configurar */

.day.unconfigured{
  background:#ffffff !important;
  border:1px solid #e3e6e9 !important;
  color:#9aa1a9;
}

/* =========================================================
   NAVEGACION DE ANOS - VERSION DEFINITIVA
   ========================================================= */

.calendar-year-nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}

.calendar-year-side{
  min-width:0;
}

.calendar-year-left{
  justify-self:start;
}

.calendar-year-right{
  justify-self:end;
}

.calendar-year-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:9px 14px;
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:10px;
  font-weight:700;
}

.calendar-year-current{
  font-size:20px;
  text-align:center;
}

@media(max-width:390px){
  .calendar-year-nav a{
    padding:9px 10px;
    font-size:14px;
  }

  .calendar-year-current{
    font-size:18px;
  }
}


/* =========================================================
   ACCIONES DE GASTOS
   ========================================================= */

.expense-actions{
  align-items:center;
}

.expense-actions form{
  margin:0;
}

.expense-actions .secondary-button,
.expense-actions button{
  min-height:44px;
  padding:10px 13px;
}

@media(max-width:760px){
  .expense-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }

  .expense-actions a,
  .expense-actions form,
  .expense-actions button{
    width:100%;
  }
}