/* P-11 — CSS verbatim de los bloques de estilo de Pages/Common/MDInputForCustomPage.razor. Igual que hoy, es global mientras el componente está en pantalla:
   se enlaza con <link> donde estaba el bloque. Cambios: @@ → @. */
.custom-dialog .e-dialog {
border-radius: 8px;
width: 40%;
height: 50%;
max-width: 300px;
max-height: 300px;
min-Width: 200px;
min-Height: 200px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.custom-dialog .input-container {
display: block;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
}

.custom-dialog .e-dlg-header, .e-dlg-header * {
color: green;
font-size: 20px;
font-weight: 600;
}

.custom-dialog .e-dialog .e-dlg-header {
color: green;
font-size: 20px;
font-weight: normal;
}

/* Estilos generales para el grid */
.e-grid {
border: 1px solid #cccccc;
background-color: #ffffff;
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
}

/* Estilos para las cabeceras de las columnas */
.e-grid .e-headercell {
background-color: #4CAF50; /* Verde vibrante */
color: #ffffff;
font-weight: bold;
text-align: center;
padding: 2px;
border-bottom: 2px solid #388E3C;
}

/* Estilos para las celdas de datos */
.e-grid .e-rowcell {
background-color: #f9f9f9;
color: #333333;
text-align: left;
padding: 2px;
border-bottom: 1px solid #dddddd;
}

/* Estilo para las filas alternas (zebra striping) */
.e-grid .e-alt_row {
background-color: #e0f7fa; /* Azul claro */
}

/* Hover en las filas */
.e-grid .e-row:hover {
background-color: #d1f2eb; /* Color suave para hover */
cursor: pointer;
}

/* Estilo para la barra de herramientas */
.e-grid .e-toolbar {
background-color: #e0e0e0;
border-bottom: 2px solid #cccccc;
}

/* Estilo para los botones de la barra de herramientas */
.e-grid .e-toolbar .e-toolbar-items .e-tbar-btn {
color: #4CAF50; /* Verde */
border: none;
font-size: 14px;
padding: 6px 12px;
}

.e-grid .e-toolbar .e-toolbar-items .e-tbar-btn:hover {
background-color: #a5d6a7; /* Verde suave */
}

/* Estilo para los paginadores */
.e-grid .e-gridpager .e-pagercontainer {
background-color: #f1f1f1;
color: #666666;
border-top: 1px solid #cccccc;
}

.e-grid .e-gridpager .e-pager .e-pagerdefault {
color: #4CAF50; /* Verde */
}

.e-grid .e-gridpager .e-prevnext {
color: #4CAF50; /* Verde */
}


.e-numeric.e-style .e-control.e-numerictextbox {
color: royalblue;
border: 0px;
font-size: 0.9em;
}

.e-input-group.e-style.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), .e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left) {
border-color: royalblue;
}

.e-control-wrapper.e-numeric.e-float-input.e-style .e-spin-down {
color: royalblue;
}

.e-control-wrapper.e-numeric.e-float-input.e-style .e-float-line::before {
background: royalblue;
}

.e-control-wrapper.e-numeric.e-float-input.e-style .e-float-line::after {
background: royalblue;
}

.e-control-wrapper.e-numeric.e-float-input.e-style .e-spin-up {
color: royalblue;
}

.e-control-wrapper.e-numeric.e-float-input.e-style.e-input-group .e-float-text.e-label-top {
color: royalblue;
}

.e-numeric.e-styleqt .e-input-group-icon.e-spin-up:before {
content: "\e823";
color: rgba(0, 0, 0, 0.54);
}

.e-numeric.e-styleqt .e-input-group-icon.e-spin-down:before {
content: "\e934";
color: rgba(0, 0, 0, 0.54);
}

.textbox-wrapper {
width: 100%;
max-width: 300px;
padding: 10px;
border-radius: 10px;
border: none;
font-size: 1.2rem;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.textbox-wrapper:focus {
outline: none;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}