:root{
  --rojo: #b5121b;
  --rojo-oscuro: #7e0d13;
  --rojo-claro: #f6dcdc;
  --blanco: #ffffff;
  --gris-fondo: #f2f2f4;
  --gris-borde: #e2e0e0;
  --texto: #1f1f1f;
  --texto-suave: #6b6b6b;
  --exito: #2e7d32;
  --alerta: #c62828;
  --alerta-fondo: #fdecea;
  --ambar: #f9a825;
  --ambar-fondo: #fff3d9;
  --azul: #1565c0;
  --radio: 12px;
  --radio-chico: 6px;
  --elev-1: 0 1px 2px rgba(0,0,0,.16), 0 1px 3px rgba(0,0,0,.10);
  --elev-2: 0 2px 4px rgba(0,0,0,.14), 0 3px 8px rgba(0,0,0,.12);
  --elev-3: 0 6px 14px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Ubuntu", "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--gris-fondo);
  color: var(--texto);
  font-size: 15px;
}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
*{transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease, transform .1s ease;}

/* ---------- Layout — Material Design: elevación con sombra, color sólido, esquinas redondeadas ---------- */
.app-shell{display:flex; flex-direction:column; min-height:100vh}

.topbar{
  display:flex; align-items:center; gap:14px;
  background: var(--rojo);
  color:#fff; padding:10px 18px; position:sticky; top:0; z-index:50;
  box-shadow: var(--elev-2);
}
.btn-menu{display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer}
.marca{display:flex; align-items:center; gap:10px; white-space:nowrap}
.marca-logo{height:34px; width:auto; max-width:150px; object-fit:contain; background:#fff; border-radius:var(--radio-chico); padding:3px 6px;}
.marca-texto{display:flex; flex-direction:column; line-height:1.2}
.marca-texto small{opacity:.85; font-weight:400}

.buscador-top{flex:1; display:flex; max-width:460px; margin:0 auto}
.buscador-top input{
  flex:1; border:none; border-radius:20px 0 0 20px; padding:8px 14px; outline:none;
}
.buscador-top button{
  border:none; background:var(--rojo-oscuro); color:#fff; padding:0 14px; border-radius:0 20px 20px 0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.usuario-actual{display:flex; align-items:center; gap:10px; white-space:nowrap}
.usuario-actual .salir{background:rgba(255,255,255,.18); padding:6px 12px; border-radius:20px; font-size:13px; display:inline-flex; align-items:center; gap:5px;}
.usuario-actual .salir:hover{background:rgba(255,255,255,.32)}

.cuerpo{display:flex; flex:1; min-height:0}

.sidebar{
  width:260px; background:#fff; box-shadow: var(--elev-1);
  padding:14px 0; flex-shrink:0; position:relative; z-index:10;
}
.sidebar a{
  display:flex; align-items:center; gap:10px; margin:2px 8px; padding:11px 14px; color:var(--texto); font-size:14.5px;
  border-radius:20px 4px 4px 20px;
}
.sidebar a:hover{background:#f0eded}
.sidebar a.activo{background:var(--rojo-claro); color:var(--rojo-oscuro); font-weight:600}
.sidebar .sep{height:1px; background:var(--gris-borde); margin:10px 20px}
.icono-menu{flex-shrink:0; opacity:.8}
.sidebar a.activo .icono-menu{opacity:1; color:var(--rojo-oscuro)}

/* Submenús con <details>/<summary> nativos */
.menu-grupo{margin:2px 8px}
.menu-grupo-titulo{
  display:flex; align-items:center; gap:10px; padding:11px 14px; font-size:14.5px; color:var(--texto);
  cursor:pointer; user-select:none; list-style:none; border-radius:20px 4px 4px 20px;
}
.menu-grupo-titulo::marker{content:''}
.menu-grupo-titulo::-webkit-details-marker{display:none}
.flecha-menu{margin-left:auto; font-size:11px; color:var(--texto-suave); transition:transform .15s ease; flex-shrink:0;}
.menu-grupo[open] > .menu-grupo-titulo .flecha-menu{transform:rotate(180deg)}
.menu-grupo-titulo:hover{background:#f0eded}
.menu-grupo[open] > .menu-grupo-titulo{background:var(--rojo-claro); color:var(--rojo-oscuro); font-weight:600; border-radius:20px 4px 0 0;}
.submenu{display:flex; flex-direction:column; background:#faf8f8; border-radius:0 0 4px 20px; overflow:hidden; margin-bottom:2px;}
.submenu a{margin:0; padding:9px 14px 9px 44px; font-size:13.5px; color:var(--texto-suave); border-radius:0;}
.submenu a:hover{background:var(--rojo-claro); color:var(--rojo-oscuro)}
.submenu a.activo{color:var(--rojo-oscuro); font-weight:600; background:#fff;}

.contenido{flex:1; padding:24px; min-width:0; overflow-x:auto}

/* ---------- Componentes ---------- */
.encabezado-pagina{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  margin-bottom:18px;
}
.encabezado-pagina h1{margin:0; font-size:22px; color:var(--rojo-oscuro)}
.encabezado-pagina p{margin:4px 0 0; color:var(--texto-suave); font-size:13.5px}

.btn{
  display:inline-block; background:var(--rojo); color:#fff; border:none; padding:10px 18px;
  border-radius:20px; cursor:pointer; font-size:14px; font-weight:600; box-shadow:var(--elev-1);
}
.btn:hover{background:var(--rojo-oscuro); box-shadow:var(--elev-2)}
.btn:active{box-shadow:none}
.btn-secundario{background:#fff; color:var(--rojo); border:1px solid var(--rojo); box-shadow:none}
.btn-secundario:hover{background:var(--rojo-claro); box-shadow:none}
.btn-chico{padding:6px 12px; font-size:12.5px; border-radius:16px}
.btn-gris{background:#ececed; color:#333; box-shadow:none}
.btn-gris:hover{background:#dedfe0; box-shadow:none}
.btn-verde{background:var(--exito)}
.btn-verde:hover{background:#245c26}

.tarjeta{
  background:#fff; border-radius:var(--radio); box-shadow:var(--elev-1); padding:20px; margin-bottom:18px;
}

.grid-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:16px; margin-bottom:22px}
.mini-card{
  background:#fff; border-radius:var(--radio); box-shadow:var(--elev-1); padding:18px; border-top:4px solid var(--rojo);
}
.mini-card .num{font-size:30px; font-weight:700; color:var(--rojo-oscuro)}
.mini-card .lbl{font-size:13px; color:var(--texto-suave)}

table{width:100%; border-collapse:collapse; font-size:14px}
thead th{
  text-align:left; background:var(--rojo-claro); color:var(--rojo-oscuro); padding:11px 12px; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.03em; position:sticky; top:0;
}
tbody td{padding:11px 12px; border-bottom:1px solid var(--gris-borde); vertical-align:middle}
tbody tr:hover{background:#faf8f8}

.badge{
  display:inline-block; padding:4px 11px; border-radius:20px; font-size:12px; font-weight:600; color:#fff; white-space:nowrap;
}
.badge-dias{font-size:12px; color:var(--texto-suave)}
.badge-dias.alerta{color:var(--alerta); font-weight:700}
.fila-alerta{background:var(--alerta-fondo) !important}

.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}
.form-grid label{display:flex; flex-direction:column; gap:5px; font-size:13.5px; font-weight:600; color:#444}
.form-grid input, .form-grid select, .form-grid textarea{
  padding:10px 12px; border:1px solid var(--gris-borde); border-radius:var(--radio-chico); font-size:14px; font-family:inherit;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus{outline:2px solid var(--rojo-claro); border-color:var(--rojo)}
.form-grid textarea{resize:vertical}
.ancho-completo{grid-column:1/-1}

.acciones-fila{display:flex; gap:6px; flex-wrap:wrap}
.icono-accion{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:50%; background:#f0f0f2; text-decoration:none; box-shadow:var(--elev-1);
}
.icono-accion.whatsapp{background:#e3f8e0; color:#1f9c46}
.icono-accion.llamada{background:#e2edfd; color:var(--azul)}

.filtros{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.filtros select, .filtros input{padding:8px 12px; border:1px solid var(--gris-borde); border-radius:20px}

.vacio{padding:40px 20px; text-align:center; color:var(--texto-suave)}

.login-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: var(--rojo-oscuro);
  padding:16px;
}
.login-caja{background:#fff; border-radius:var(--radio); padding:34px; width:100%; max-width:360px; box-shadow:var(--elev-3); text-align:center}
.login-caja img{height:70px; margin-bottom:10px}
.login-caja h1{font-size:18px; color:var(--rojo-oscuro); margin:6px 0 2px}
.login-caja p{color:var(--texto-suave); font-size:13px; margin-top:0}
.login-caja input{width:100%; padding:11px; margin-top:10px; border:1px solid var(--gris-borde); border-radius:var(--radio-chico); font-size:14px}
.login-caja .btn{width:100%; margin-top:16px; padding:11px}
.login-error{background:var(--alerta-fondo); color:var(--alerta); padding:8px 10px; border-radius:var(--radio-chico); font-size:13px; margin-top:12px}

.calendario-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.calendario-celda{background:#fff; min-height:90px; border-radius:var(--radio-chico); padding:6px; font-size:12px; box-shadow:var(--elev-1)}
.calendario-celda.hoy{outline:2px solid var(--rojo)}
.calendario-celda .num-dia{font-weight:700; color:var(--texto-suave)}
.calendario-celda .evento{
  display:block; margin-top:3px; padding:2px 5px; border-radius:4px; background:var(--rojo-claro); color:var(--rojo-oscuro);
  font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.calendario-celda .feriado{background:#fce4b8; color:#8a5a00}
.calendario-cabecera{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; font-size:12px; font-weight:700; color:var(--rojo-oscuro); text-align:center}

.tag{display:inline-block; background:var(--rojo-claro); color:var(--rojo-oscuro); padding:3px 10px; border-radius:20px; font-size:11.5px; margin:2px 3px 0 0}

.agenda-vertical{display:flex; flex-direction:column; gap:14px}
.agenda-dia{background:#fff; border-radius:var(--radio); box-shadow:var(--elev-1); overflow:hidden; border-left:4px solid var(--gris-borde)}
.agenda-dia.agenda-hoy{border-left-color:var(--rojo)}
.agenda-dia-cabecera{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
  padding:12px 16px; background:#faf8f8;
}
.agenda-dia-cabecera strong{color:var(--rojo-oscuro); font-size:15px; margin-right:8px;}
.agenda-fecha{color:var(--texto-suave); font-size:13px; margin-right:8px;}
.agenda-lista{display:flex; flex-direction:column}
.agenda-item{
  display:flex; gap:14px; padding:12px 16px; border-bottom:1px solid #f2f2f2; align-items:flex-start; flex-wrap:wrap;
}
.agenda-item:last-child{border-bottom:none}
.agenda-item-hora{
  flex-shrink:0; width:52px; font-weight:700; color:var(--rojo-oscuro); font-size:13.5px; padding-top:2px;
}
.agenda-item-cuerpo{flex:1; min-width:180px}
.agenda-item-meta{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:3px; font-size:12.5px; color:var(--texto-suave)}
.agenda-item-notas{font-size:12.5px; color:var(--texto-suave); margin-top:4px; font-style:italic}
.agenda-item-acciones{display:flex; gap:6px; flex-shrink:0}
@media (max-width:600px){
  .agenda-item{flex-direction:column}
  .agenda-item-hora{width:auto}
}
.resultado-busqueda{display:flex; gap:12px; align-items:center; padding:12px; border-bottom:1px solid var(--gris-borde)}
.resultado-busqueda .icono{font-size:22px}
.resultado-busqueda .modulo{font-size:11px; text-transform:uppercase; color:var(--texto-suave)}

/* ---------- Dashboard: mensaje motivacional, anuncio, alertas, gráfico ---------- */
.mensaje-motivacional{
  background:#fff; border-radius:var(--radio); box-shadow:var(--elev-1); border-left:5px solid var(--rojo);
  padding:14px 18px; margin-bottom:18px; display:flex; align-items:center; gap:12px; font-size:14px; color:var(--texto);
}
.mensaje-motivacional .icono-mensaje{color:var(--rojo); flex-shrink:0}
.mensaje-motivacional em{font-style:normal; font-weight:600; color:var(--rojo-oscuro)}

.anuncio-naranja{
  background:var(--ambar-fondo) !important; border-radius:var(--radio); box-shadow:var(--elev-1); border-left:5px solid var(--ambar);
  padding:14px 18px; margin-bottom:18px; display:flex; align-items:flex-start; gap:12px; font-size:14px; color:#6b4400;
}
.anuncio-naranja .icono-anuncio{color:#a8760a; flex-shrink:0; margin-top:1px;}
.anuncio-naranja strong{display:block; margin-bottom:2px; color:#4d3300;}

.caja-alerta{
  background:var(--alerta-fondo); border-radius:var(--radio); box-shadow:var(--elev-1); border-left:5px solid var(--alerta);
  padding:14px 18px; margin-bottom:18px;
}
.caja-alerta .titulo-alerta{display:flex; align-items:center; gap:10px; color:var(--alerta); font-weight:700; font-size:15px; margin-bottom:10px;}
.caja-alerta .titulo-alerta svg{flex-shrink:0}

.grafico-barras{display:flex; align-items:flex-end; gap:8px; height:150px; padding:10px 4px 0;}
.grafico-barra-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:4px;}
.grafico-barra{width:100%; max-width:28px; background:var(--rojo); border-radius:6px 6px 0 0; min-height:3px;}
.grafico-barra.vacia{background:#e6e2e2}
.grafico-barra-num{font-size:10.5px; color:var(--texto-suave); font-weight:600;}
.grafico-barra-etiqueta{font-size:10px; color:var(--texto-suave); margin-top:2px; text-align:center; white-space:nowrap;}

/* ---------- Responsivo ---------- */
@media (max-width: 900px){
  .btn-menu{display:block}
  .sidebar{
    position:fixed; left:-270px; top:57px; bottom:0; z-index:60; transition:left .2s ease;
    box-shadow: var(--elev-3); overflow-y:auto;
  }
  .sidebar.abierto{left:0}
  .buscador-top{display:none}
  .contenido{padding:14px}
  table, thead, tbody, tr{display:block}
  thead{display:none}
  tbody tr{
    background:#fff; margin-bottom:12px; border-radius:var(--radio); box-shadow:var(--elev-1); padding:8px 0;
  }
  tbody td{
    display:flex; justify-content:space-between; gap:10px; text-align:right; border-bottom:1px solid #f0f0f0;
  }
  tbody td::before{content:attr(data-label); font-weight:600; color:var(--texto-suave); text-align:left}
  .calendario-grid, .calendario-cabecera{grid-template-columns:repeat(7,1fr); font-size:10px}
  .calendario-celda{min-height:60px; padding:4px}
}