* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family:
Arial,
Helvetica,
sans-serif;
background: transparent;
color: #333333;
}
.pagina {
min-height: 100vh;
padding:
35px
15px;
}
.contenedor {
max-width: 850px;
margin: 0 auto;
background: #ffffff;
border:
1px
solid
#dcdcdc;
border-radius: 5px;
}
/* CABECERA */
.cabecera {
display: flex;
align-items: center;
gap: 16px;
padding:
20px
24px
16px;
}
.logo {
width: 68px;
height: 68px;
object-fit: contain;
}
.institucion {
color: #b08a32;
font-size: 11px;
font-weight: bold;
letter-spacing: 0.8px;
margin-bottom: 5px;
}
h1 {
margin: 0;
color: #153d70;
font-size: 25px;
font-weight: 600;
}
.linea-dorada {
height: 3px;
background: #c1a252;
}
/* BÚSQUEDA */
.busqueda {
padding:
25px
24px
20px;
}
.busqueda label {
display: block;
margin-bottom: 7px;
font-size: 14px;
font-weight: bold;
color: #444444;
}
.grupo-busqueda {
display: flex;
width: 100%;
}
.grupo-busqueda input {
flex: 1;
min-width: 0;
height: 43px;
padding:
0
12px;
border:
1px
solid
#bfc5cb;
border-radius:
4px
0
0
4px;
outline: none;
font-size: 15px;
}
.grupo-busqueda input:focus {
border-color: #23558c;
box-shadow:
inset
0
0
0
1px
#23558c;
}
.grupo-busqueda button {
min-width: 115px;
height: 43px;
border: 0;
border-radius:
0
4px
4px
0;
background: #174574;
color: #ffffff;
font-size: 14px;
font-weight: bold;
cursor: pointer;
}
.grupo-busqueda button:hover {
background: #12385f;
}
.grupo-busqueda button:disabled {
opacity: 0.6;
cursor: default;
}
.ayuda {
margin-top: 8px;
color: #777777;
font-size: 12px;
}
/* MENSAJE */
.mensaje {
display: none;
margin:
0
24px
15px;
padding:
11px
13px;
border-radius: 3px;
font-size: 13px;
}
.mensaje.activo {
display: block;
}
.mensaje.error {
background: #fff0f0;
color: #a12626;
border:
1px
solid
#e5c4c4;
}
.mensaje.info {
background: #eef5fb;
color: #24547d;
border:
1px
solid
#c8d9e7;
}
/* RESULTADOS */
.resultados-contenedor {
padding:
0
24px
25px;
}
.resultados-titulo {
display: flex;
justify-content: space-between;
gap: 15px;
padding:
10px
0;
border-bottom:
1px
solid
#d9dde1;
color: #174574;
font-size: 14px;
}
.resultados-titulo span {
color: #777777;
font-size: 12px;
font-weight: normal;
}
.resultados {
width: 100%;
}
/* FILA DE RESULTADO */
.cas-persona {
display: grid;
grid-template-columns:
1fr
auto;
gap: 15px;
align-items: center;
padding:
13px
8px;
border-bottom:
1px
solid
#e7e7e7;
cursor: pointer;
transition:
background
0.15s;
}
.cas-persona:hover {
background: #f7f9fb;
}
.cas-persona-nombre {
color: #174574;
font-size: 14px;
font-weight: bold;
}
.cas-persona-meta {
margin-top: 5px;
color: #666666;
font-size: 12px;
}
.cas-numero {
font-weight: bold;
color: #8a6a1e;
}
.cas-persona-arrow {
color: #b18c35;
font-size: 21px;
}
/* ESTADOS GENERALES */
.cas-empty,
.cas-loading {
padding:
25px
10px;
text-align: center;
color: #777777;
font-size: 13px;
}
.cas-loading::before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
margin-right: 7px;
vertical-align: middle;
border:
2px
solid
#d5d5d5;
border-top-color:
#174574;
border-radius: 50%;
animation:
girar
0.7s
linear
infinite;
}
@keyframes girar {
to {
transform: rotate(360deg);
}
}
/* FOOTER */
footer {
padding:
13px
24px;
border-top:
1px
solid
#e2e2e2;
background: #fafafa;
color: #999999;
text-align: center;
font-size: 11px;
}
/* MÓVIL */
@media (max-width: 600px) {
.pagina {
padding:
12px
8px;
}
.cabecera {
padding:
16px;
}
.logo {
width: 55px;
height: 55px;
}
h1 {
font-size: 21px;
}
.institucion {
font-size: 9px;
}
.busqueda {
padding:
20px
16px
15px;
}
.grupo-busqueda {
display: block;
}
.grupo-busqueda input {
width: 100%;
border-radius: 4px;
}
.grupo-busqueda button {
width: 100%;
margin-top: 8px;
border-radius: 4px;
}
.resultados-contenedor {
padding:
0
16px
20px;
}
.mensaje {
margin:
0
16px
15px;
}
.resultados-titulo {
display: block;
}
.resultados-titulo span {
display: block;
margin-top: 4px;
}
}
/* =========================================================
DETALLE DEL COLEGIADO
========================================================= */
.detalle-contenedor {
display: none;
padding:
0
24px
25px;
}
.detalle-contenedor.activo {
display: block;
}
.detalle-ficha {
border:
1px
solid
#d5d9dd;
border-radius: 4px;
overflow: hidden;
background: #ffffff;
}
.detalle-cabecera {
padding:
11px
15px;
background: linear-gradient(
135deg,
#174574 0%,
#2367a5 55%,
#174574 100%
);
color: #ffffff;
font-size: 14px;
font-weight: bold;
}
.detalle-cuerpo {
display: grid;
grid-template-columns:
150px
1fr;
gap: 22px;
padding:
22px;
}
.detalle-foto {
width: 150px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #d5d5d5;
background: #f6f6f6;
padding: 4px;
overflow: hidden;
}
.detalle-foto img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.detalle-sin-foto {
color: #999999;
font-size: 12px;
text-align: center;
}
.detalle-nombre {
margin-bottom: 16px;
color: #174574;
font-size: 19px;
font-weight: bold;
line-height: 1.3;
}
.detalle-tabla {
width: 100%;
border-collapse: collapse;
}
.detalle-tabla td {
padding:
7px
5px;
border-bottom:
1px
solid
#eeeeee;
font-size: 13px;
}
.detalle-tabla td:first-child {
width: 170px;
color: #666666;
font-weight: bold;
}
.detalle-cas {
color: #8a681d;
font-weight: bold;
}
.estado-habilitado {
display: inline-block;
padding:
5px
10px;
border-radius: 3px;
background: #e7f5eb;
border:
1px
solid
#b9dfc3;
color: #26743a;
font-size: 12px;
font-weight: bold;
}
.estado-no-habilitado {
display: inline-block;
padding:
5px
10px;
border-radius: 3px;
background: #fff0f0;
border:
1px
solid
#e3c1c1;
color: #a02d2d;
font-size: 12px;
font-weight: bold;
}
.detalle-volver {
padding:
12px
15px;
border-top:
1px
solid
#e5e5e5;
background: #fafafa;
}
.detalle-volver button {
border:
1px
solid
#bfc5ca;
border-radius: 3px;
padding:
7px
14px;
background: #ffffff;
color: #174574;
cursor: pointer;
font-size: 12px;
}
.detalle-volver button:hover {
background: #f3f5f7;
}
/* MÓVIL */
@media (max-width: 600px) {
.detalle-contenedor {
padding:
0
16px
20px;
}
.detalle-cuerpo {
display: block;
padding: 18px;
}
.detalle-foto {
width: 130px;
min-height: 155px;
margin:
0
auto
18px;
}
.detalle-nombre {
text-align: center;
font-size: 17px;
}
.detalle-tabla td:first-child {
width: 135px;
}
}