/* =====================================================================
   Registro de clientes: diseño clásico en cuadros (tablas), con color.
   ===================================================================== */

:root {
  --azul: #1F4E9C;
  --azul-oscuro: #163A78;
  --azul-claro: #DCE8FA;
  --fondo: #EAF1FB;
  --texto: #1C2A44;
  --borde: #1F4E9C;
  --verde: #2E8B57;
  --verde-oscuro: #236B43;
  --naranja: #E8850C;
  --naranja-oscuro: #BF6C05;
  --error: #B42318;
  --error-fondo: #FDECEA;
  --ok: #14603D;
  --ok-fondo: #E3F4EC;
}

body {
  margin: 20px;
  background: var(--fondo);
  color: var(--texto);
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, .titulo { color: var(--azul); text-align: center; }
h1 { font-size: 24px; margin: 20px 0; }
h2 { font-size: 20px; margin: 20px 0; }
.titulo { font-weight: bold; margin: 24px 0 14px; }

/* ---------- Cuadros (tablas) ---------- */

table { border-collapse: collapse; margin: 0 auto; background: #fff; }
table, th, td { border: 1px solid var(--borde); }
th, td { padding: 10px; }

th { background: var(--azul); color: #fff; text-align: left; }

/* Menú del sistema */
.menu { width: 260px; max-width: 100%; }
.menu .cabeza { background: var(--azul); text-align: center; }
.menu .cabeza h2 { margin: 0; color: #fff; font-size: 20px; }
.menu td { padding: 0; text-align: center; }
.menu td a { display: block; padding: 12px 10px; font-weight: bold; }
.menu td a:hover { text-decoration: none; }
.op-registrar { background: #DFF3E4; } .op-registrar a { color: #1B6B3A; } .op-registrar:hover { background: #C6E9D0; }
.op-consultar { background: #DCE8FA; } .op-consultar a { color: #1F4E9C; } .op-consultar:hover { background: #C4D8F5; }
.op-todos     { background: #FFF1C9; } .op-todos a     { color: #8A5A00; } .op-todos:hover     { background: #FFE49B; }
.op-actualizar{ background: #EADFF7; } .op-actualizar a{ color: #5B2C9E; } .op-actualizar:hover{ background: #DAC8F0; }

/* Formularios y datos: primera columna con etiqueta */
.cuadro-form { width: 420px; max-width: 100%; }
.cuadro-datos { width: 500px; max-width: 100%; }
.etiqueta, .cuadro-datos th {
  width: 130px;
  background: var(--azul-claro);
  color: var(--azul-oscuro);
  font-weight: bold;
  text-align: left;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid #8FA9D6;
  border-radius: 4px;
  background: #fff;
  color: var(--texto);
  font: inherit;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus {
  outline: 2px solid #F2BE1A;
  border-color: var(--azul);
}
input[readonly] { background: #E6EAF1; color: #55607A; }
input[aria-invalid="true"] { border-color: var(--error); background: var(--error-fondo); }
.campo__error { display: block; margin-top: 4px; color: var(--error); font-size: 12px; }

/* Botones */
.botones { margin: 18px 0; text-align: center; }
.botones a { margin-left: 10px; font-weight: bold; }
input[type="submit"] {
  padding: 8px 20px;
  border: 0;
  border-radius: 4px;
  background: var(--azul);
  color: #fff;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}
input[type="submit"]:hover { background: var(--azul-oscuro); }
input[type="submit"].guardar { background: var(--verde); }
input[type="submit"].guardar:hover { background: var(--verde-oscuro); }
input[type="submit"].actualizar { background: var(--naranja); }
input[type="submit"].actualizar:hover { background: var(--naranja-oscuro); }
:focus-visible { outline: 3px solid #F2BE1A; outline-offset: 2px; }

/* Enlaces bajo un resultado */
.enlaces { margin: 18px 0; text-align: center; }
.enlaces a { font-weight: bold; }

/* Mensajes */
.aviso {
  width: 500px;
  max-width: 100%;
  margin: 0 auto 16px;
  padding: 10px 14px;
  border: 1px solid;
  border-radius: 4px;
  text-align: center;
}
.aviso--ok { background: var(--ok-fondo); border-color: #8CCBAA; color: var(--ok); }
.aviso--error { background: var(--error-fondo); border-color: #E9A7A0; color: var(--error); }
.mensaje-error { color: var(--error); text-align: center; font-weight: bold; }

/* Listado */
.tabla-scroll { overflow-x: auto; }
.listado { width: 905px; max-width: 100%; }
.listado th { text-align: center; }
.listado tbody tr:nth-child(odd)  { background: #F3F7FE; }
.listado tbody tr:nth-child(even) { background: #DFEAFB; }
.listado tbody tr:hover { background: #FFF1C9; }
.listado .sin-datos { text-align: center; color: #55607A; background: #fff; }

@media (max-width: 520px) {
  body { margin: 12px; }
  .etiqueta, .cuadro-datos th { width: 95px; }
}