html, body { height: 100%; margin: 0; padding: 0; }

body {
    background-color: #fff;
    min-height: 100%;
    font-size: 16px;
    padding: 2rem;
    font-family: 'Roboto', sans-serif;
    box-shadow: 4px 0 5px 0px rgba(0,0,0,0.05) inset;
}

.page-title { margin-bottom: 3rem; }
.page-title h1 { color: #222; font-size: 2rem; margin-bottom: 0; }
.page-title p { color: #222; font-size: 1.3rem; margin-top: .5rem; }

h2 { color: #222; font-size: 1.5rem; }

h3 {
    font-family: 'Roboto', sans-serif;
    color: #222;
    font-size: 1.25rem;
    text-decoration: none;
}

button[type="submit"] { color: white; }

td button { display: inline-block; margin-right: 10px; }

.button--isi {
    margin: 0;
    border-radius: .5rem;
    background-color: #0B00CF;
    color: white;
    padding: 1rem 1.2rem;
}

.button--alert { background-color: #c70132; }
.button--secondary { background-color: #222; margin-bottom: 4rem; }

.row { margin-bottom: 2rem; }

.Tabla, .TablaMedia {
    width: 100%;
    border: 2px solid #ccc;
}

.Tabla thead tr th, .TablaMedia thead tr th {
    padding: 16px;
    border-bottom: 2px solid #ccc;
    text-align: left;
    border-right: 1px solid #ccc;
}

.Tabla tbody tr td, .TablaMedia tbody tr td {
    padding: 16px;
    border-bottom: 1px solid #ccc;
    text-align: left;
    border-right: 1px solid #ccc;
}

.Tabla tbody tr:hover td, .TablaMedia tbody tr:hover td {
    background: #016ec71a;
    cursor: pointer;
}

.Tabla tbody tr:nth-of-type(even) td, .TablaMedia tbody tr:nth-of-type(even) td {
    background-color: #f4f4f4;
}

.tablaabm tr td { padding: 8px 8px; }
.tablaabm tr td.tablaabmtit {
    font-size: 1rem;
    font-weight: 500;
    color: #222;
    width: 300px;
    text-align: right;
}

input {
    padding: 8px;
    color: #000;
    border: 1px solid #ccc;
    min-width: 400px;
}

select {
    font-size: 1rem;
    font-family: Helvetica;
    color: #000;
    border: 1px solid #ccc;
    padding: 8px;
    min-width: 350px;
}
.simple-button {
    background-color: #007bff; /* Azul */
    color: #ffffff; /* Texto blanco */
    padding: 10px 20px;
    border: 1px solid #007bff;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.simple-button:hover {
    background-color: #0056b3; /* Azul más oscuro en hover */
}

.horario-container {
    display: flex;
    flex-direction: column;
}

.day-schedule {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.horarios-list {
    display: flex;
    flex-direction: column;
    margin-right: 10px;
}

.horario-pair {
    display: flex;
    align-items: center;
    margin-top: 5px;
    flex-direction: column;
    width: 140px;
}


.horario-container {
	display: flex;
	align-items: center;
    flex-direction: row;
    align-items: flex-start;
}

.input-time {
	min-width: 197px;
	background: transparent;
}

.input-time:invalid:before {
	content: attr(data-placeholder);
	color: #999;
	background: #f9f9f9;
	position: absolute;
    white-space: nowrap;      /* Mantiene el contenido en una sola línea */
    overflow: hidden;         /* Oculta el texto que se sale del área */
    text-overflow: ellipsis;  /* Añade '...' al final si el texto es muy largo */
    max-width: 80%;          /* Ajusta el ancho máximo al tamaño del contenedor */
}

.time-input:focus:before {
	width: 0;
	content: '';
}

.input-time.min {
    min-width: 140px;
    padding: 8px;
}

.tablaabmtit.min {
    width: auto !important;
}

.horario-divider {
    width: 100%;
    height: 1px;
    background-color: #ccc;
    margin: 5px 0;
}

.day-divider {
    width: 100%;
    height: 2px;
    background-color: #333;
    margin: 15px 0;
}

.items-center {
    display: flex;
    justify-content: center;
}

.items-end {
    display: flex;
    justify-content: flex-end;
}

.horarioActions {
    display: flex;
    width: 100%;
}

.horarioActions div {
    width: 33.33%;
}

.horarioActions button {
    margin-right: 0px;
    border: none;
    fill:#333;
    background: none;
}
.horarioActions button svg:hover {
    fill:#c70132;
    cursor: pointer;
}

textarea.textinput{
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    color: #333;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}