:root{
    --verde-oscuro:#0f5a52;
    --verde:#16a085;
    --verde-claro:#e6f7f4;
    --azul:#1c6ea4;
    --rojo:#c0392b;
    --amarillo:#e6a817;
    --gris:#5a6b6a;
    --blanco:#ffffff;
    --borde:#d5e8e4;
    --sombra:0 4px 18px rgba(15,90,82,.12);
}

*{box-sizing:border-box;}

html,body{
    height:100%;
    margin:0;
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    color:#233;
}

/* Fondo temático de medicina / farmacia: cruz médica y píldoras en degradado */
body{
    background-color:#eef7f5;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(22,160,133,.10) 0 90px, transparent 91px),
        radial-gradient(circle at 88% 12%, rgba(28,110,164,.10) 0 70px, transparent 71px),
        radial-gradient(circle at 92% 82%, rgba(22,160,133,.09) 0 110px, transparent 111px),
        radial-gradient(circle at 6% 86%, rgba(28,110,164,.08) 0 90px, transparent 91px),
        linear-gradient(135deg,#f3fbfa 0%,#e6f4f1 55%,#ddeef0 100%);
    background-attachment:fixed;
    min-height:100vh;
}

.bg-cruz{
    position:fixed;
    inset:0;
    z-index:-1;
    opacity:.05;
    background-image:
      repeating-linear-gradient(0deg, var(--verde) 0 6px, transparent 6px 140px),
      repeating-linear-gradient(90deg, var(--verde) 0 6px, transparent 6px 140px);
    background-size:140px 140px;
    pointer-events:none;
}

.contenedor-central{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.tarjeta-login{
    background:var(--blanco);
    border-radius:16px;
    box-shadow:var(--sombra);
    padding:36px 32px;
    width:100%;
    max-width:400px;
    border-top:6px solid var(--verde);
}

.tarjeta-login h1{
    font-size:1.3rem;
    color:var(--verde-oscuro);
    margin:0 0 4px;
    text-align:center;
}
.tarjeta-login p.subtitulo{
    text-align:center;
    color:var(--gris);
    margin:0 0 22px;
    font-size:.85rem;
}

.logo-cruz{
    width:56px;height:56px;margin:0 auto 12px;
    background:var(--verde);
    border-radius:14px;
    position:relative;
    display:block;
}
.logo-cruz::before,.logo-cruz::after{
    content:"";
    position:absolute;background:#fff;
}
.logo-cruz::before{width:24px;height:8px;top:24px;left:16px;border-radius:2px;}
.logo-cruz::after{width:8px;height:24px;top:16px;left:24px;border-radius:2px;}

label{
    display:block;
    font-size:.82rem;
    font-weight:600;
    color:var(--verde-oscuro);
    margin:14px 0 6px;
}

input[type=text],input[type=password],input[type=tel],input[type=number],
input[type=date],select,textarea{
    width:100%;
    padding:10px 12px;
    border:1.5px solid var(--borde);
    border-radius:8px;
    font-size:.95rem;
    background:#fbfefe;
    transition:border-color .15s;
}
input:focus,select:focus,textarea:focus{
    outline:none;
    border-color:var(--verde);
    background:#fff;
}

.fila-captcha{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:6px;
}
.fila-captcha img{
    border-radius:8px;
    border:1.5px solid var(--borde);
    cursor:pointer;
}
.fila-captcha small{color:var(--gris);}

button, .btn{
    display:inline-block;
    border:none;
    cursor:pointer;
    padding:11px 18px;
    border-radius:8px;
    font-weight:600;
    font-size:.92rem;
    background:var(--verde);
    color:#fff;
    transition:background .15s, transform .1s;
    text-decoration:none;
}
button:hover,.btn:hover{background:var(--verde-oscuro);}
button:active,.btn:active{transform:scale(.98);}
.btn-secundario{background:var(--azul);}
.btn-secundario:hover{background:#154f75;}
.btn-peligro{background:var(--rojo);}
.btn-peligro:hover{background:#8e2d21;}
.btn-amarillo{background:var(--amarillo);color:#3a2c00;}
.btn-bloque{width:100%;margin-top:20px;}

.error-msg{
    background:#fdecea;
    color:var(--rojo);
    border:1px solid #f5c6c1;
    padding:10px 14px;
    border-radius:8px;
    font-size:.85rem;
    margin-bottom:14px;
}
.exito-msg{
    background:#e8f8ee;
    color:#1c7c3f;
    border:1px solid #bfe8cd;
    padding:10px 14px;
    border-radius:8px;
    font-size:.85rem;
    margin-bottom:14px;
}

.enlace-modulos{
    text-align:center;
    margin-top:18px;
    font-size:.8rem;
}
.enlace-modulos a{color:var(--azul);text-decoration:none;}

/* ============ LAYOUT INTERNO (paneles) ============ */
.app-shell{display:flex;min-height:100vh;}
.sidebar{
    width:230px;
    background:linear-gradient(180deg,var(--verde-oscuro),#0a3e39);
    color:#fff;
    padding:20px 14px;
    flex-shrink:0;
}
.sidebar h2{font-size:1rem;margin:0 0 4px;}
.sidebar .rol-tag{font-size:.72rem;opacity:.75;margin-bottom:20px;}
.sidebar a{
    display:block;color:#dff5ef;text-decoration:none;
    padding:10px 12px;border-radius:8px;font-size:.87rem;margin-bottom:4px;
}
.sidebar a:hover,.sidebar a.activo{background:rgba(255,255,255,.12);}
.sidebar .logout{margin-top:20px;border-top:1px solid rgba(255,255,255,.15);padding-top:14px;}

.main-content{flex:1;padding:26px 30px;max-width:100%;overflow-x:auto;}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:10px;}
.topbar h1{font-size:1.35rem;color:var(--verde-oscuro);margin:0;}

.tarjetas-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:24px;}
.tarjeta{background:#fff;border-radius:14px;padding:18px;box-shadow:var(--sombra);border-left:5px solid var(--verde);}
.tarjeta h3{margin:0 0 6px;font-size:.8rem;color:var(--gris);text-transform:uppercase;letter-spacing:.03em;}
.tarjeta .valor{font-size:1.5rem;font-weight:700;color:var(--verde-oscuro);}
.tarjeta.alerta{border-left-color:var(--rojo);}
.tarjeta.amarilla{border-left-color:var(--amarillo);}

.caja{background:#fff;border-radius:14px;padding:20px;box-shadow:var(--sombra);margin-bottom:22px;}
.caja h2{margin-top:0;font-size:1.05rem;color:var(--verde-oscuro);}

table{width:100%;border-collapse:collapse;font-size:.88rem;}
th,td{padding:9px 10px;border-bottom:1px solid var(--borde);text-align:left;}
th{background:var(--verde-claro);color:var(--verde-oscuro);font-size:.78rem;text-transform:uppercase;}
tr:hover td{background:#f7fdfc;}
.tabla-scroll{overflow-x:auto;}

.badge{padding:3px 9px;border-radius:20px;font-size:.72rem;font-weight:700;}
.badge-verde{background:#e6f7ee;color:#1c7c3f;}
.badge-roja{background:#fdecea;color:var(--rojo);}
.badge-amarilla{background:#fff6e0;color:#8a6100;}

.parpadeo{animation:parpadeo 1s infinite;}
@keyframes parpadeo{0%,100%{opacity:1;}50%{opacity:.25;}}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
@media(max-width:720px){.grid-2,.grid-3{grid-template-columns:1fr;}}

.form-inline{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.form-inline > div{flex:1;min-width:160px;}

.acciones a, .acciones button{margin-right:6px;font-size:.78rem;padding:6px 10px;}

.whatsapp-flot{
    position:fixed;bottom:22px;right:22px;
    background:#25d366;color:#fff;border-radius:50px;
    padding:14px 20px;box-shadow:0 6px 20px rgba(0,0,0,.2);
    text-decoration:none;font-weight:700;font-size:.9rem;
    display:flex;align-items:center;gap:8px;z-index:50;
}

.chip-clasif{display:inline-block;background:var(--verde-claro);color:var(--verde-oscuro);
    padding:4px 10px;border-radius:20px;font-size:.72rem;margin:2px;}

@media(max-width:880px){
    .app-shell{flex-direction:column;}
    .sidebar{width:100%;display:flex;flex-wrap:wrap;align-items:center;padding:12px;}
    .sidebar h2,.sidebar .rol-tag{width:100%;}
    .sidebar a{padding:8px 10px;}
    .main-content{padding:18px;}
}

.hint-tab{font-size:.72rem;color:var(--gris);margin-top:4px;}