* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.pagina-sesion {
    background: #eef3f1;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ============================================================
   Contenedor de las dos tarjetas
   ========================================================== */
.puerta {
    width: 100%;
    max-width: 480px;
    margin: 34px auto 10px;
    padding: 0 16px;
}

.puerta-titulo {
    text-align: center;
    color: #4b5f6e;
    font-size: 14px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.puerta-sub {
    text-align: center;
    color: #7d8e9c;
    font-size: 13px;
    margin-bottom: 26px;
}

/* ============================================================
   Tarjeta base
   ========================================================== */
.tarjeta {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(15, 40, 60, 0.13);
    overflow: hidden;
    margin-bottom: 26px;
}

.tarjeta-cinta {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 24px;
    color: #ffffff;
}

.tarjeta-cinta svg {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.tarjeta-cinta h2 {
    font-size: 17px;
    letter-spacing: 0.3px;
    font-weight: 700;
}

.tarjeta-cinta p {
    font-size: 12.5px;
    opacity: 0.85;
    margin-top: 2px;
}

/* Administrator: azul oscuro con acento cian */
.tarjeta.admin .tarjeta-cinta {
    background: linear-gradient(95deg, #0a1424, #146b9e);
}

.tarjeta.admin .tarjeta-cinta svg {
    color: #47fdee;
}

/* Cliente: negro, igual que el resto del sitio */
.tarjeta.cliente .tarjeta-cinta {
    background: #000000;
}

.tarjeta.cliente .tarjeta-cinta svg {
    color: #47fdee;
}

.tarjeta-cuerpo {
    padding: 24px;
}

/* ============================================================
   Campos de los formularios
   ========================================================== */
.campo-sesion {
    margin-bottom: 14px;
}

.campo-sesion label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #33465e;
    margin-bottom: 6px;
}

.campo-sesion input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d5e0ec;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    color: #0a1424;
    background: #ffffff;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.campo-sesion input:focus {
    border-color: #146b9e;
    box-shadow: 0 0 0 3px rgba(20, 107, 158, 0.15);
}

/* ============================================================
   Botones de envío
   ========================================================== */
.btn-entrar {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: filter 0.2s, transform 0.1s;
}

.btn-entrar.admin {
    background: #146b9e;
    color: #ffffff;
}

.btn-entrar.cliente {
    background: #4343ff;
    color: #ffffff;
}

.btn-entrar:hover:not(:disabled) {
    filter: brightness(1.12);
}

.btn-entrar:active:not(:disabled) {
    transform: scale(0.99);
}

.btn-entrar:disabled {
    opacity: 0.65;
    cursor: progress;
}

/* ============================================================
   Avisos de error
   ========================================================== */
.aviso {
    display: none;
    padding: 10px 13px;
    border-radius: 9px;
    font-size: 13px;
    margin-bottom: 15px;
}

.aviso.visible {
    display: block;
}

.aviso.mal {
    background: #fdeaec;
    border: 1px solid #f0a8ae;
    color: #8c0d18;
}

.aviso.bien {
    background: #e7f8ee;
    border: 1px solid #9ad9b6;
    color: #14603a;
}

/* ============================================================
   Pie del formulario de cliente
   ========================================================== */
.pie-tarjeta {
    text-align: center;
    margin-top: 18px;
    font-size: 13.5px;
    color: #5f707d;
}

.pie-tarjeta a {
    color: #146b9e;
    font-weight: 700;
    text-decoration: none;
}

.pie-tarjeta a:hover {
    text-decoration: underline;
}

/* ============================================================
   Aviso cuando ya hay sesión iniciada
   ========================================================== */
.sesion-activa {
    display: none;
    background: #e7f8ee;
    border: 1px solid #9ad9b6;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
    text-align: center;
    color: #14603a;
}

.sesion-activa.visible {
    display: block;
}

.sesion-activa strong {
    display: block;
    font-size: 15px;
    margin-bottom: 6px;
}

.sesion-activa a {
    color: #146b9e;
    font-weight: 700;
}

/* ============================================================
   Pie del documento
   ========================================================== */
.puerta-pie {
    text-align: center;
    margin: 8px 0 26px;
    font-size: 13px;
    color: #7d8e9c;
}

.puerta-pie a {
    color: #146b9e;
    font-weight: 700;
    text-decoration: none;
}

.puerta-pie a:hover {
    text-decoration: underline;
}

/* ============================================================
   Responsive
   ========================================================== */
@media (max-width: 540px) {
    .tarjeta-cuerpo { padding: 20px; }
    .tarjeta-cinta { padding: 15px 20px; }
}