/* ================================
   Reset y estilo base
   ================================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff; /* suave y neutro */
    color: #666;
    line-height: 1.5;
    padding: 15px;
    font-size: 13px;
}

h1, h2, h3, h4, h5 {
    color: #666;
    margin-bottom: 10px;
}

img {
	filter: grayscale(0%);
    transition: filter .3s ease; 
	mix-blend-mode: multiply;
  }
img:hover {
   filter: grayscale(100%);
  }
  

/* ================================
   Texto y etiquetas básicas
   ================================ */
p {
    margin-bottom: 10px;
    font-size: 13px;
}

a {
    color: #3498db;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

a:hover {
    color: #1d6fa5;
    text-decoration: none;
}

u {
    text-decoration: underline;
    text-decoration-color: #3498db;
}

b, strong {
    font-weight: 700;
    color: #2c3e50;
}

div {
    margin-bottom: 12px;
}

/* ================================
   Formularios
   ================================ */
form {
    background-color: #F0F4F8;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    max-width: 100%;
    margin: 0 auto 10px auto;
	padding-bottom:1px;
	
}

label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    color: #2c3e50;
    font-size: 13px;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
select,
textarea {
	
	background-color:#fefefe;
    padding: 8px 10px;
    margin-bottom: 10px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 13px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 2px rgba(52,152,219,0.2);
    outline: none;
}

input[type="checkbox"] {
    transform: scale(1.1);
    margin-right: 6px;
}

/* Botones */
button,
input[type="submit"] {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s;
}

button:hover,
input[type="submit"]:hover {
    background-color: #2980b9;
}

/* ================================
   Tablas
   ================================ */
table {
    width: 100%;
    border-collapse: separate;
    margin-bottom: 20px;
    background-color: #F0F4F8;
	/*background: linear-gradient(145deg, #F0F4F8, #D9DEE4);*/
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
	border-spacing: 0px 1px;       /* espacio vertical entre filas y horizontal entre columnas */
    border-bottom: 1px solid #666666;
}

th, td {
    padding: 8px 10px;
    text-align: left;
    font-size: 13px;
}

th {
    background-color:#999;
    color: #F0F4F8;
    font-weight: 600;
    border-bottom: 1px solid #999999; /* borde inferior */
	border-left: 1px solid #ffffff; /* borde inferior */
}

/* Enlaces dentro de cabeceras de tabla */
th a {
    color: #F0F4F8;              /* blanco para contraste */
    text-decoration: none;       /* sin subrayado */
    font-weight: 400;
    display: inline-block;
    padding: 2px 4px;
    transition: color 0.3s, text-decoration 0.3s;
}

td a {
    color: #666;              /* blanco para contraste */
    
}
th a:hover {
    color: #1d6fa5;              /* azul claro al pasar el ratón */
    text-decoration: none;  /* subrayado al hover */
}

tr:hover {
    background-color: #F0F4F8;
}

/* ================================
   Layout responsive
   ================================ */
@media (max-width: 768px) {
    body {
        padding: 8px;
    }

    form, table {
        width: 100%;
        margin: 0 auto 15px auto;
    }

    th, td {
        padding: 6px 8px;
        font-size: 12px;
    }

    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: 12px;
        padding: 6px 8px;
    }

    button,
    input[type="submit"] {
        width: 100%;
        padding: 8px;
        font-size: 12px;
    }
}

/* ================================
   Mensajes de error / éxito
   ================================ */
.message {
    padding: 8px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 13px;
}

.message.error {
    background-color: #fdecea;
    color: #e74c3c;
    border: 1px solid #f5c6cb;
}

.message.success {
    background-color: #e9f7ef;
    color: #27ae60;
    border: 1px solid #c3e6cb;
}