:root {
--bg-start: #dcecff;
--bg-middle: #f2e7ff;
--bg-end: #fff4dc;

--surface: #ffffff;
--text: #1f1f1f;
--muted: #5f6368;
--border: #8a8a8a;

--primary: #0f6cbd;
--primary-hover: #115ea3;

--danger-bg: #fde7e9;
--danger-text: #a4262c;

--success-bg: #dff6dd;
--success-text: #107c10;

--shadow: 0 8px 30px rgba(0, 0, 0, 0.18);

}

* {
  box-sizing: border-box;
  }

html {
min-height: 100%;
}

body {
margin: 0;
min-height: 100vh;
font-family: "Segoe UI", Arial, sans-serif;
color: var(--text);

background:
    radial-gradient(
        circle at 12% 18%,
        rgba(255, 255, 255, 0.9),
        transparent 28%
    ),
    linear-gradient(
        135deg,
        var(--bg-start),
        var(--bg-middle),
        var(--bg-end)
    );

}

/* Página principal */

.page {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
}

/* Tarjeta de acceso */

.card {
width: 100%;
max-width: 440px;
padding: 44px;
background: var(--surface);
box-shadow: var(--shadow);
animation: enter 0.28s ease-out;
}

@keyframes enter {
from {
opacity: 0;
transform: translateY(10px);
}

to {
    opacity: 1;
    transform: translateY(0);
}

}

/* Marca y logo */

.brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
}

.brand-name {
font-size: 20px;
font-weight: 600;
color: #525252;
}
.brand-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Contenedor de los cuatro cuadrados */

.mark {
display: grid;
grid-template-columns: repeat(2, 12px);
grid-template-rows: repeat(2, 12px);
gap: 1px;
flex-shrink: 0;
}

/* Tamaño general de los cuadrados */

.mark span {
display: block;
width: 12px;
height: 12px;
}

/* Cuadrado superior izquierdo */

.mark span:nth-child(1) {
background: #e74856;
}

/* Cuadrado superior derecho */

.mark span:nth-child(2) {
background: #0078d4;
}

/* Cuadrado inferior izquierdo */

.mark span:nth-child(3) {
background: #7fba00;
}

/* Cuadrado inferior derecho */

.mark span:nth-child(4) {
background: #ffb900;
}

/* Títulos y textos */

h1 {
margin: 0 0 10px;
font-size: 26px;
font-weight: 625;
line-height: 1.25;
}

.subtitle {
margin: 0 0 26px;
color: var(--muted);
line-height: 1.55;
}

/* Formulario */

.field {
margin-bottom: 22px;
}

label {
display: block;
margin-bottom: 8px;
font-size: 14px;
}

input {
width: 100%;
padding: 11px 3px;

border: 0;
border-bottom: 1px solid var(--border);
border-radius: 0;

outline: 0;
background: transparent;
color: var(--text);

font: inherit;

}

input:focus {
border-bottom: 2px solid var(--primary);
}

/* Botón */

.actions {
display: flex;
justify-content: flex-end;
margin-top: 30px;
}

.button {
min-width: 124px;
padding: 11px 22px;

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

font: inherit;
cursor: pointer;

}

.button:hover {
background: var(--primary-hover);
}

.button:disabled {
opacity: 0.65;
cursor: not-allowed;
}

/* Mensajes */

.message {
display: none;
margin-top: 20px;
padding: 12px;

font-size: 14px;
line-height: 1.45;

}

.message.error {
display: block;
color: var(--danger-text);
background: var(--danger-bg);
}

.message.success {
    display: block;
    color: #1f1f1f;
    background: transparent;
    padding: 0;
    margin-top: 16px;
    font-size: 14px;
}

/* Nota inferior */

.small-note {
margin: 24px 0 0;
color: var(--muted);

font-size: 13px;
line-height: 1.5;

}

/* Diseño para móviles */

@media (max-width: 560px) {
.page {
padding: 0;
place-items: start stretch;
background: #ffffff;
}

.card {
    min-height: 100vh;
    max-width: none;
    padding: 34px 24px;
    box-shadow: none;
}

}
/* Enlace "¿No puede acceder a su cuenta?" */

.links{
    margin-top:15px;
    margin-bottom:34px;
}

.recover-link{
    color:#0067b8;
    text-decoration:none;
    font-size:12px;
}

.recover-link:hover{
    text-decoration:underline;
}

/* Botón gris */

.button.secondary{
    background:#d2d2d2;
    color:#1f1f1f;
}

.button.secondary:hover{
    background:#bfbfbf;
}

/* Dos botones */

.actions{
    display:flex;
    justify-content:flex-end;
    gap:4px;
}
.small-button{
    min-width:105px;
    padding:6px 18px;
    font-size:15px;
}

/* Página del aviso */

.aviso-card {
    display: block;
}

.aviso-card h1,
.aviso-card h2,
.aviso-card p,
.aviso-card ul {
    width: auto;
}

.security-notice {
    display: block;
    margin-top: 24px;
    padding: 22px;
    border-left: 4px solid #d89b00;
    background: #fff4ce;
}

.security-notice h2 {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 600;
}

.security-list {
    display: block;
    margin: 0;
    padding-left: 22px;
    color: #4b4b4b;
    line-height: 1.6;
}

.security-list li {
    display: list-item;
    margin-bottom: 10px;
}

.aviso-card .small-note {
    display: block;
    margin-top: 22px;
}

.aviso-card .actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 28px;
}

.aviso-card .button {
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.brand{
    display:flex;
    align-items:center;
    margin-bottom:30px;
}

.company-logo{
    height:40px;
    width:auto;
    display:block;
}