/*==================================================
 SISTEMA DE ASISTENCIA SJB - ESTILOS GENERALES
==================================================*/
:root{
 --primary:#006633;
 --primary-dark:#004d26;
 --secondary:#1976d2;
 --danger:#dc3545;
 --success:#28a745;
 --warning:#ffc107;
 --light:#f4f6f9;
 --white:#fff;
 --text:#333;
 --radius:8px;
 --shadow:0 2px 10px rgba(0,0,0,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,Helvetica,sans-serif;background:var(--light);color:var(--text);line-height:1.5}
a{text-decoration:none}
img{max-width:100%}
.header{background:var(--primary);color:#fff;padding:18px;text-align:center;font-size:24px;font-weight:bold;box-shadow:var(--shadow)}
.header small{display:block;font-size:14px;font-weight:normal;margin-top:4px}
.menu{display:flex;flex-wrap:wrap;align-items:center;background:var(--primary-dark)}
.menu a{color:#fff;padding:14px 18px;transition:.3s}
.menu a:hover{background:var(--primary)}
.menu a:last-child{margin-left:auto;background:#b71c1c}
.container{width:min(1200px,95%);margin:25px auto}
.footer{background:var(--primary);color:#fff;text-align:center;padding:15px;margin-top:30px}
.bienvenida{background:#fff;border-left:5px solid var(--primary);padding:20px;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:25px}
.dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:25px;text-align:center;transition:.25s}
.card:hover{transform:translateY(-4px)}
.card .icono{font-size:46px;margin-bottom:10px}
.card h3{color:var(--primary);margin-bottom:8px}
.card p{font-size:30px;font-weight:bold}
.formulario{max-width:700px;margin:auto;background:#fff;padding:25px;border-radius:var(--radius);box-shadow:var(--shadow)}
.formulario h2{text-align:center;color:var(--primary);margin-bottom:20px}
.formulario label{display:block;margin:12px 0 6px;font-weight:bold}
.formulario input,.formulario select,.formulario textarea{
width:100%;padding:12px;border:1px solid #ccc;border-radius:6px;font-size:15px}
.formulario textarea{resize:vertical;min-height:120px}
button,.boton,.btn-editar,.btn-eliminar,.btn-azul{
display:inline-block;border:none;border-radius:6px;padding:10px 16px;color:#fff;cursor:pointer;font-size:14px}
button,.boton{background:var(--primary)}
button:hover,.boton:hover{background:#008844}
.btn-azul,.btn-editar{background:var(--secondary)}
.btn-azul:hover,.btn-editar:hover{background:#0b5ed7}
.btn-eliminar{background:var(--danger)}
.btn-eliminar:hover{background:#bb2d3b}
.tabla{width:100%;border-collapse:collapse;background:#fff;box-shadow:var(--shadow);border-radius:var(--radius);overflow:hidden}
.tabla th{background:var(--primary);color:#fff;padding:12px}
.tabla td{padding:12px;border-bottom:1px solid #e6e6e6}
.tabla tbody tr:nth-child(even){background:#fafafa}
.tabla tbody tr:hover{background:#eef9f1}
.activo,.inactivo{
display:inline-block;padding:4px 10px;border-radius:20px;color:#fff;font-size:12px;font-weight:bold}
.activo{background:var(--success)}
.inactivo{background:var(--danger)}
.login{width:min(380px,95%);margin:60px auto;background:#fff;padding:30px;border-radius:var(--radius);box-shadow:var(--shadow);text-align:center}
.login img{width:120px;margin-bottom:15px}
.login h2{color:var(--primary);margin-bottom:15px}
.login input{width:100%;padding:12px;margin:10px 0;border:1px solid #ccc;border-radius:6px}
.login button{width:100%}
@media(max-width:768px){
.header{font-size:20px}
.menu{flex-direction:column;align-items:stretch}
.menu a,.menu a:last-child{margin-left:0}
.container{width:98%}
.tabla{display:block;overflow-x:auto;white-space:nowrap}
.dashboard{grid-template-columns:1fr}
.formulario{padding:18px}
}